Flex布局

 Flex弹性布局（工具）

1）Flex布局基础知识

什么是Flex布局

Flex是Flexible Box的缩写，意为‘弹性的盒子’，所以Flex布局一般也叫做“Flex 弹性布局，它的典型案例是圣杯布局。

任何一个HTML元素都可以指定为Flex布局：display:flex或 inline-flex;

display:flex表示Flex容器是块级元素，display:inline-flex表示flex容器是内联块元素

什么是Flex容器（flex container）

采用Flex布局的元素，称为Flex容器。

什么是Flex项目（flex item）

Flex容器的所有子元素 自动成为容器成员，称为Flex项目。

什么是主轴，什么是交叉轴

 Flex项目默认沿主轴起始排列；

2）Flex容器的属性：

flex-direction:

决定主轴的方向（即Flex项目布局的排列方向）

flex-direction属性值：

row(默认值)：主轴为水平方向，起点在左端；

row-reverse:主轴为水平方向，起点在右端；

column:主轴为垂直方向，起点在上沿；

column-reverse:主轴为垂直方向，起点在下沿

flex-wrap:

默认情况下，Flex项目都排在一条轴线上。flex-wrap属性定义了如果一条轴线排不下，如何换行。

flex-wrap属性值：

nowrap(默认值)：不换行；

wrap：换行，第一行在上方；

wrap-reverse：换行，第一行在下方

flex-flow:

flex-flow是flex-direction和flex-wrap的简写的形式，默认值：flex-flow: row nowrap

justify--content:

justify-content是规定项目在主轴上的对齐方式；

justify-content属性值：

flex-start(默认值)：项目靠主轴的起点对齐；

flex-end:项目靠主轴的终点对齐；

center：项目靠主轴方向的中心对齐；

space-between:flex项目之间的间隔都相等，没有项目相邻的两边不留间隔；

space-around：每个Flex项目两侧的间隔相等，所以项目与项目之间的间隔要比与边框的间隔大一倍

align-items:

align-items定义了Flex项目在交叉轴上的对齐方式；

align-items的属性值：

stretch（默认值）：如果Flex项目未设置交叉轴方向的大小或为auto，将沾满整个容器的交叉轴方向的大小；

flex-start：项目靠交叉轴的起点对齐；

flex-end: 项目靠交叉轴的终点对齐；

flex-center:项目靠交叉轴的中线对齐；

beseline:项目靠第一行文字的基线对齐；

align-content(了解即可):

align-content定义了存在多根主轴时，Flex项目在交叉轴上如何对齐。如果项目只有一根株洲县，该属性不起作用

align-content的属性值：

stretch（默认值）：主轴线平分Flex容器交叉轴方向上的空间；

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

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

center:与交叉轴的中点对齐；

space-between:与交叉轴哦两端对齐，轴线之间的间隔平均分布；

space-around:每根轴线两侧的间隔都相等，所以轴线之间的间隔比轴线与边框的间隔大一倍；

3）Flex项目的属性

order属性

项目的order属性定义了Flex项目的排列顺序；数值越小，排列越靠前，默认为0；

order属性的属性值为数字，可以是负数。

flex-grow属性

flex-grow属性定义了Flex项目在主轴方向上的放大比例，默认为0：即如果存在剩余空间，该项目也不会放大。（剩余空间指的是除去固定空间之外的同一方向上的空间）；

flex-grow的属性值是数字型的。

flex-shrink属性

flex-shrink属性定义了Flex项目在主轴方向上的缩小比例，默认为1，即如果空间不足，该项目将缩小；

flex-shrink属性值：

数字型，默认所有项目的flex-shrink值为1。当所有的项目的flex-shrink属性值不为0时，当空间不足，则所有项目将等比缩小。

如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，其他项目等比缩小，为0的不缩小。

flex-basis

定义了在分配多余空间之前，Flex项目占据的主轴大小（main size）(可以理解为主轴方向上项目的确定大小)；

浏览器根据这个属性，计算主轴是否有多余空间；

flex-basis的属性值：

它的默认值为auto，即项目的本来大小。

值的类型为长度；

flex

flex属性是flex-grow,flex-shrink,flex-basis属性的简写；默认值为0 1 auto；

flex有两个快捷值：auto和none，其中auto代表（1 1 auto），none代表（0 0 auto）；

align-self

align-self属性允许单个项目与其他项目不一样的对齐方式，可以覆盖容器的align-item属性；

align-self属性值：默认是auto，其他值flex-start/flex-end/center/stretch/baseline

总结图：