Flex布局（弹性布局）

弹性布局（flexbox)是一种用于在容器中对项目进行布局的CSS模块。弹性布局通过设置容器的属性和项目的属性来实现灵活的布局效果。

了解两个基本概念：

1. 容器：需要添加弹性布局的父元素
2. 项目：弹性布局容器中的每一个子元素，称为项目

了解两个基本方向：

1. 主轴：在弹性布局中，我们会通过属性规定水平/垂直方向为主轴
2. 交叉轴：与主轴垂直的另一方向，称为交叉轴

弹性布局的使用

1. 给父容器添加display：flex/inline-flex；属性，即可使容器内容采用弹性布局显示，而不遵循常规文档流的显示方式
2. 容器添加弹性布局后，仅仅是容器内容（项目）采用弹性布局，而容器本身在文档流中的定位方式依然遵循常规文档流
3. display：flex；容器添加弹性布局后，显示为块级元素，display：inline-flex；容器添加弹性布局后，显示为行内元素
4. 设为Flex布局后，子元素的float、clear和vertical-align属性将失效，但是position属性，依然生效

display：flex;使用的12大属性。其中，12个属性分为两类，6个作用于父容器，6个作用于子项目

一、作用于父容器的6大属性

1. flex-direction属性决定主轴的方向（即项目的排列方向）

• row(默认值）：主轴为水平方向，起点在左端；
• row-reverse：主轴在水平方向，起点在右端；
• column：主轴为垂直方向，起点在上沿；
• column-reverse：主轴为垂直方向，起点在下沿。

1. flex-wrap属性定义，如果一条轴线排不下，进行换行

• nowrap(默认）：不换行，当容器宽度不够时，每个项目会被挤压宽度；
• wrap：换行，并且第一行在容器最上方；
• wrap-reverse：换行，并且 第一行在容器最下方。

1. flex-flow是flex-direction和flex-wrap的缩写形式，默认值为：flex-flow:row wrap;
2. justify-content属性定义了项目在主轴上的对齐方式（此属性与主轴方向息息相关）。

主轴方向为：row起点在左边，row-reverse起点在右边，column起点在上边，column-reverse起点在下边

• flex-start(默认值）：项目位于主轴起点。
• flex-end:项目位于主轴终点。
• center：居中。
• space-between：两端对齐，项目之间的间隔都相等。（开头和最后的项目，与父容器边缘没有间隔）
• space-around：每个项目两侧的相等，所以项目之间的间隔比项目与边框的间隔大一倍（开头与最后的项目，与父容器边缘有一定的间隔）

1. align-items属性定义项目在交叉轴上如何对齐

        flex-start:交叉轴的起点对齐

        flex-end:交叉轴的终点对齐

        center：交叉轴的中点对齐

        baseline：项目的第一行文字的基线对齐（文字的行高、字体大小会影响每一行的基线）

        stretch（默认值）：如果项目未设置高度或者设为auto，将占满整个容器的高度。

1. align-content属性定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用。（当项目换为多行时，可使用align-centent取代align-items）

• flex-start:与交叉轴的起点对齐
• flex-end:与交叉轴的终点对齐
• center：与交叉轴的中点对齐
• space-bewteen：与交叉轴两端对齐，轴线之间的间隔平均分布
• space-around：每根轴线两侧的间隔都相等，所以轴线之间的间隔比轴线与边框的间隔大一倍
• stretch(默认值）：轴线占满整个交叉轴

二、作用于项目的6大属性

1. order属性定义项目的排列顺序，数值越小，排列越靠前，默认为0.
2. flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间也不放大。
3. flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不够，该项目将缩小，设为0，则不缩小
4. flex-basis定义项目占据的主轴空间，如果主轴为水平，则设置这个属性，相当于设置项目的宽度，原width将会失效
5. flex属性是flex-grow,flex-shrink和flex-basis的简写，默认值为0 1 auto。后两个属性可选，此属性有两个快捷设置：auto=（1 1 auto)/none=(0 0 auto)
6. align-self:定义单个项目自身在交叉轴上的排列方式，可以覆盖掉容器上的align-items属性。属性值：与align-items相同，默认值为auto，表示继承父容器的align-items属性值。