2009年,W3C提出了一种新的方案——Flex布局,可以简便,完整,响应式的完成各种页面布局。目前,已经得到了所有浏览器的支持,可以放心的使用。
何为主轴,何为侧轴?
若flex-direction为默认row
若flex-direction为** row-reverse**
若flex-direction为column
若flex-direction为column-reverse
属性:
作用在flex容器上 | 作用在flex子项上 |
---|---|
flex-direction | order |
flex-wrap | flex-grow |
flex-flow | flex-shrink |
justify-content | flex-basis |
align-content | flex |
align-items | align-self |
作用在父元素上属性及属性值:
-
flex-direction : 用来控制子项整体布局方向
row :默认值,显示为行。方向为当前文档水平流方向,默认情况下是从左往右。
row-reverse :显示为行,但方向和row属性值是相反的。
column :显示为列。
column-reverse :显示为列,但方向和column属性值是相反的。 -
flex-wrap :用来控制子项单行显示还是换行显示
nowrap :默认值,表示单行显示,不换行。
wrap :宽度不够,换行显示。
wrap-reverse :宽度不足,换行显示,但方向是从下往上。 -
flex-flow :是flex-direction和flex-wrap的复合写法。第一个是方向,第二个是换行,中间空格隔开。
-
justify-content :决定主轴方向上子项的对齐和分布方式。
flex-start :默认值,表现为起始位置对齐
flex-end :表现为结束位置对齐
center :表现为居中对齐
space-between :表现为两端对齐,多余的空白间距只在元素中间区域分配
space-around :环绕,意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距,视觉上是中间空白宽度 是边缘空白的2倍。
space-evenly :匀称,视觉是子项左右宽度完全相等。 -
align-items :flex子项们相对于flex容器在侧轴方向上的对齐方式
stretch :默认值,flex子项拉伸。
flex-start :表现为容器顶部对齐。
flex-end :表现为容器底部对齐。
center :表现为容器垂直居中对齐。 -
align-content :可以看似与justify-content对立的属性,只针对多行起作用。
stretch :默认值,每项flex子元素都等比例拉伸。例如有两行,则每行拉伸为50%。
flex-start :表现为起始位置对齐
flex-end:表现为结束位置对齐
center:表现为居中对齐
space-between:表现为两端对齐
space-around:每行元素上下享有独立不重叠的空白区域
space-evenly:每行元素完全上下等分
作用在子项属性及属性值:
- order:默认值为0,可以改变一个flex子项的排序位置,值越小的越靠前显示。
- flex-grow:默认值为0,意为扩展,扩展所占的空间就是除去元素外剩余的空白间隙。(有空隙此值才会生效。)
- flex-shrink:默认值为1,默认收缩。主要处理空间不足的时候,单个元素的收缩比例。可以设置为0,表示不收缩。
- flex-basis:定义分配剩余空间之前元素的默认大小,优先级比自定义大小高。
- flex:flex-grow,flex-shrink,flex-basis的复合写法,书写顺序如前。
- align-self:控制单独某一个flex子项的垂直对齐方式。
区分
-
当flex-direction:row; flex-wrap:wrap;(上图) 当flex-direction:row; flex-wrap:wrap-reverse;(下图)
-
当flex-direction:column; flex-wrap:wrap;(上图)当flex-direction:column; flex-wrap:wrap-reverse;(下图)
-
当flex-direction:row-reverse; (上图)当flex-direction:row; justify-content:flex-end;(下图)