对flex布局的总结归纳

作者 likaiqiang 日期 2017-07-22
对flex布局的总结归纳

flex常用属性

display:flex

这条属性通常设置在父元素上,表示这是一个flex的弹性盒模型,该元素的子元素遵循flex弹性盒模型的某些特点。

flex弹性盒模型的特点

flex布局默认会是一个等高布局,flex布局下浮动会无效。

flex

这是一个复合属性,是flex-basis、flex-grow、flex-shrink三条属性的合并写法。

这条属性用在子元素上,表示子元素如何分配父元素的剩余空间、子元素的尺寸以及子元素超出父元素的处理方法,具体含义参见下面对这三条属性的解释。

flex-wrap

这条属性用在父元素上,有两个值nowrap/wrap,表示子元素超出父元素宽度后,子元素是否可以换行。

flex-direction

这条属性用在父元素上,有两个值row/column,默认为row,表示子元素的主轴方向,row横向的方向是主轴方向,column纵向的方向为主轴方向。

align-items

这条属性用在父元素上,表示子元素在纵轴方向上的对齐方式。有5个取值,默认为stretch。

justify-content

这条属性用在父元素上,表示子元素在横轴方向上的对齐方式。有5个取值,默认为flex-start。

align-content

这条属性用在父元素上,表示在纵轴方向上多行子元素的对齐方式,区别于align-items,这个是多行。

align-self

这条属性用在子元素上,与align-items是双胞胎,区别于align-items,它是用在子元素上的,表示某一个子元素在纵轴上的对齐方式。

flex不常用属性

以下三条属性其实并不是不常用,只是我们通常不直接操作它们。

一经典的布局:一父元素,俩子元素,左边的子元素宽度不固定,如何实现右边子元素宽度自适应剩余的宽度?

先不考虑兼容性,最好的方法是使用flex布局

上面这个demo,css中的flex:1是一个合成属性

刚好是下面三条属性的合成,看到了吧,我们时刻都在使用它们,只不过是间接的操作他们。

flex-basis

flex-grow

flex-shrink

终于搞明白这三兄弟之间的关系了,感谢SegmentFault