Flex弹性盒模型

随着移动互联网的发展,对于网页布局来说要求越来越高,而传统的布局方案对于实现特殊布局非常不方便,比如垂直居中。

2009年,W3C提出了一种新的方案——Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。

作用在flex容器上作用在flex子项上
flex-directionorder
flex-wrapflex-grow
flex-flowflex-shrink
justify-contentflex-basis
align-itemsflex
align-contentalign-self

作用在Flex容器上的CSS属性

flex-direction:用来控制子项整体布局方向

取值含义
row默认值,显示为行。方向为当前文档水平流方向,默认情况为从左到右
row-reverse显示为行,方向与row相反
column显示为列
column-reverse显示为列,方向与column相反

flex-wrap:用来控制子项整体单行显示还是换行显示

取值含义
nowrap默认值,表示单行显示,不换行
wrap宽度不足时换行显示
wrap-reverse宽度不足时换行显示,方向从下至上开始

flex-flow:是flex-directionflex-wrap的缩写,表示flex布局的flow流动特性。第一个值表示方向,第二个值表示换行,中间用空格隔开。

justify-content:决定了主轴方向上子项的对齐和分布方式

取值含义
flex-start默认值,表示为起始位置对齐
flex-end表现为结束为止对齐
center表现为居中对齐
space-between表现为两端对齐,意思是多余空白间距只在元素中间区域分配
space-aroundaround是环绕的意思,最终视觉上边缘两侧的空白只有中间空白宽度的一半
space-evenlyevenly是均匀、平等的意思。最终视觉上每个flex子项两侧空白间距完全相等。

align-items:其中items指的就是flex子项们,因此,align-items指的就是flex子项们相对于flex容器在侧轴方向上的对齐方式。

取值含义
stretch默认值,flex子项拉伸
flex-start表现为容器顶部对齐
flex-end表现为容器底部对齐
center表现为垂直居中对齐

align-content:可以理解为和justify-content是相似且对立的属性,如果所有flex子项只有一行,则align-content属性是没有任何效果的。

作用在Flex子项上的CSS属性

取值含义
order可以通过设置order改变某一个flex子项的排序位置。所有flex子项的默认order属性值为0
flex-growgrow是扩展的意思,就是扩展flex子项所占据的宽度,扩展所侵占的空间就是除去元素外的剩余的空白间隙。默认值为0
flex-shrinkshrink是收缩的意思,主要处理当flex容器空间不足时,单个元素的收缩比例。默认值为1
flex-basis定义了在分配剩余空间之前元素的默认大小
flexflex属性是flex-grow、flex-shrink、flex-basis的缩写
align-self控制单独某一个flex子项的垂直对齐方式

不起眼的小广告