进一步了解flex布局—来实现这些常见布局吧

  • 时间:
  • 浏览:0

  各大UI里栅格布局基本是必备的布局之一,平均分配布局又是栅格布局里最常用的布局,利用flex实现平均分配的栅格布局,关键之处也不 利用它的自动收缩空间。

  本例中主要应用了以下flex属性:

flex-wrap:wrap,使得每行填满都会自动换行

  css代码:

  传统土辦法 上实现有一种效果,不可处理的要用到负margin,没有 现在来就看用flex实现的土辦法 吧

css如下:

  html代码:

  css代码:

  本例中主要应用了以下flex属性:

  本例的效果和上例中的图2很类事,也不 每行为三个固定宽度的列表项,而且各列表项之间留有相同宽度的空隙

  html如下:

  css代码:

  html代码:

  怎么能能让另三个 元素一同水平垂直居中?答案太大样也太大样化,而且在没有 多样化得答案中flex绝对是最简单的有一种了~



本例中应用以较少的css代码实现了传统的上中下页面布局,其中的关键通过flex-grow的使用处理了当main内容过少时footer偏离 会被提升到页面中间的问題(传统土辦法 上可能必须靠绝对定位来处理了~)

原文作者:LT_bear

 html代码:

  传统的圣杯布局必须涉及绝对定位、浮动、负margin等几大最头疼属性,有了flex布局过后发现,从前没有 简单的配方,不需要 实现没有 多样化的效果哈~

  没有 多场景都难不倒flex有木有,果真名不虚传~(  想更全部的了解flex相关属性一句话,请戳flex入门—了解有一种flex属性~)

  本例中主要应用了以下flex属性:

  要实现的效果如下:

css代码:

css代码:

flex:0 0 25%,大约flex-basis:25%,使得每另三个 列表项的宽度占外层容器(本例中的ul元素)的25%,而且每行最多不需要 排开三个列表项。

  要实现的效果如下:

  本例中主要应用了以下flex属性:

  flex布局具有便捷、灵活的特点,熟练的运用flex布局能处理大偏离 布局问題,这里对太大常用布局场景做太大总结。