Flex布局

Flex布局

Flex布局最重要的概念是容器和轴
容器包含父容器和子容器，轴则包括主轴和交叉轴
注：设为Flex布局后，子元素的float、clear和vertical-align属性将失效

一、父元素上的属性

1. flex-direction属性（决定主轴的方向，即控制子容器的排列方向）
   属性值：
   row(默认):主轴水平由左向右。
   row-reverse:主轴水平由右向左。
   column:主轴竖直由上到下。
   column-reverse:主轴竖直由下到上。
2. flex-wrap属性（控制子元素换行方式）
   属性值：
   nowrap(默认):不换行。
   wrap:换行，后面的子元素在下面。
   wrap-reverse:换行，后面的子元素在上面。
3. justify-content属性（用于指定如何布局处理子容器外的主轴剩余空白部分）
   属性值：
   flex-start（默认）:从主轴开始布局所有子元素
   flex-end:以主轴末布局所有子元素
   center:居中布局所有子元素
   space-between:将第一个子元素放到主轴开头，最后一个放到主轴末，将空白部分平均分配到各个子元素之间
   space-around:将空白部分平均分配在主轴开头和结尾和各元素之间；
4. align-items属性（单行，决定子容器在交叉轴上的对齐方式）
   属性值：
   flex-start：交叉轴的起点对齐。
   flex-end：交叉轴的终点对齐。
   center：交叉轴的中点对齐。
   baseline: 项目的第一行文字的基线对齐。
   stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
   5.align-content属性（多行，决定子容器在交叉轴上的对齐方式）
   flex-start：与交叉轴的起点对齐。
   flex-end：与交叉轴的终点对齐。
   center：与交叉轴的中点对齐。
   space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
   space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
   stretch（默认值）：轴线占满整个交叉轴。

二、子元素上的属性

1. order属性
   定义项目的排列顺序。数值越小，排列越靠前。默认为0
2. flex-grow属性
   定义项目的放大比例（剩下的空间按比例分配）。默认为0
3. flex-shrink属性
   定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
4. flex-basis属性
   定义了在分配多余空间之前，项目占据的主轴空间（main size）
   content => width => flex-basis
   如果没有设置flex-basis属性，那么flex-basis的大小就是项目的width属性的大小
   如果没有设置width属性，那么flex-basis的大小就是项目内容(content)的大小
   浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
   它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
5. flex属性
   是flex-grow, flex-shrink 和 flex-basis的简写，默认值为 0 1 auto 。后两个属性可选
   该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
6. align-self属性
   允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
   默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
   该属性可能取6个值，除了auto，其他都与align-items属性完全一致。