Flex：CSS3布局利器

Posted 2020-08-08 大唐西域都护

实习以来做了三个小控件，都是用的CSS2.1里传统的DIV+CSS布局方式，综合使用position、margin、float、BFC等属性或特性将元素放到指定的位置上。然而面对日益复杂的界面，这些来自于上个时代、主要针对普通文档流的属性越来越力不从心，比如一个垂直居中就很让人头疼。后来遇到一个布局问题，苦思良久无解，然后在前辈的指点下使用了Flex，问题瞬间解决。竟然这么神奇！那一刻真有一种相见恨晚的感觉。

Flex，顾名思义，flexible，可以自动根据布局需要灵活地调整被布局元素的位置和宽高，非常适于需要对齐、居中、等间距等规整布局，以及布局元素宽度不定的情况。

欲使容器元素变为flex布局上下文，块级元素可以声明display为flex，行内元素可以声明为inline-flex。布局方式主要在容器元素上指定。

身处flex上下文的元素，float、clear和vertical-align属性失效。position为absolute和fixed的元素将脱离文档流，而不参与flex布局；relative元素可以正常参与flex布局。

Flex上下文中的元素沿轴排布，默认横向从左到右的叫主轴，竖向从上到下的叫交叉轴，当然方向是可以改的。元素沿主轴依次排列，与主轴正交方向的对齐方式参考交叉轴。

容器属性

规定沿主轴排布方式的属性有：

flex-direction: row(默认) | row-reverse | column | column reverse 该属性规定主轴方向。

flex-wrap: no-wrap(默认) | wrap | wrap-reverse（从底往上逐行排版）

flex-flow是以上两个属性的简写

justify-content: flex-start(默认) | flex-end | center | space-between | space-around 注意！这里用的start、end而不是left、right，因为主轴方向不一定是从左向右~

规定沿交叉轴排布方式的属性有：

align-items: strech(默认) | flex-start | flex-end | center | baseline 重要属性！flex布局默认情况下会让未定高元素填满父容器，这在CSS2.1里实现巨麻烦的效果，就这么轻而易举地解决啦！垂直居中也简单，一条语句搞定！简直喜大普奔！

align-content: stretch(默认) | flex-start | flex-end | center | space-between | space-around 多根主轴（多行）在交叉轴上的排布方式，单轴时无效。默认会拉伸每个主轴上的元素以填满交叉轴长。利用该属性很容易实现多行居中。

子元素属性

order：整数，默认0，决定沿主轴的出场顺序

flex-grow: 整数，默认0，定义主轴有多余空间时项目放大的比例。具体地说，当只有一个项目该属性不为0时，它将占满剩余空间；当有多个时，将按该属性值的比例瓜分剩余空间。

flex-shrink: 整数，默认1，定义主轴空间不足时项目缩小的比例，类似grow。

flex-basis: 长度，默认auto，定义项目占据主轴的长度。浏览器据此计算主轴剩余空间。

flex: 以上三个属性的简写，为none时三个值分别为0 0 auto

align-self: 取值同align-items，多了个auto。允许单项与其他项不一样的对齐方式，覆盖align-items的效果。默认值auto继承父元素的align-items，或等于stretch。