Flex弹性布局

Flex弹性布局

将容器的displays属性设置为flex之后，容器内的元素，无论是块级元素还是行内元素，都一视同仁，成为弹性布局的元素。同时，设置浮动和vertical-align也会失效。

Flex弹性布局默认主轴为横向（flex-direction:row）默认从左到右

纵向：flex-direction:column默认从上到下

顺序反转：

row-reverse

column-reverse

flex布局中父项相关设置

主轴的内容分布：使用justify-content属性之前必须清楚主轴是哪个！

设置居中：

justify-content：center

flex-end向结束端靠拢

flex-start向开始端靠拢

space-around：平均分布，两边间距是中间间距的一半（即每个盒子的margin值相等）

space-between：平均分布，两边无间距，紧贴父容器

space-evenly：平均分布，两边有间距且与中间间距一样

侧轴的内容分布：

默认值是拉伸（stretch），若设置弹性子元素的高度则拉伸无效

align-items： flex-end/flex-start/center

设置侧轴的多行分布：

align-content：flex-end/flex-start/center/space-around/space-between/space-evenly

剩余空间分布设置即为分布占比

flex布局中子项相关设置

默认情况下，子元素都排在一条与主轴平行的轴线上，flex-wrap属性定义，flex布局中默认不换行，即增加元素，会使得原先设置的元素变形，强行挤在同一条轴线上。

flex属性定义子项目分配剩余空间，用flex来表示占多少份数。

flex-wrap：nowrap（默认不换行）

flex-wrap：wrap（换行）

单独给子元素设置侧轴分布：align-self

排序分布：order设置（按照值从小到大排序，默认值为0）

拓展：flex-flow

flex-flow: row wrap ; 等价于 flex-direction:row;flex-wrap:wrap;