了解Flex布局

概念

Flexbox布局也叫Flex布局，即弹性盒子布局。它的目标是提供一个更有效的布局和对齐方式，并且能够使父元素在子元素的大小未知或动态变化情况下仍然能够分配子元素之间的间隙。主要是使父元素能够调整子元素的宽度、高度、排列方式，从而更好地适应可用的布局方式。

Flex布局更适合小规模的布局，可以简单、完整、响应式的的实现各种页面布局。但是，设为Flex布局以后，其子元素的float、clear和vertical-align属性将失效。Flex弹性盒模型的优势在于只需声明布局应该具有的行为，而不需要给出具体的实现方式，浏览器负责完成实际布局，当布局涉及到不定宽度，分布对⻬的场景时，就要优先考虑弹性盒布局。

Flex布局是一个完整的模板，它包括了一套完整的属性。其中采用Flex布局的元素，称为Flex容器，简称“容器”。它的所有子元素就是容器成员，称为Flex项目，简称“项目”。

容器默认存在两个轴：水平轴（main axis）和交叉轴（即垂直轴，cross axis），项目默认沿主轴（水平轴）排列。

父元素属性

想要使用flex布局时，首先需要给父元素指定为flex布局

父元素（容器）可以设置以下六个属性：

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

flex-direction

flex-direction：主轴方向，它决定了容器内元素排列方向，它有四个属性值

• row：默认值，沿水平主轴从左到右排列，起点在左沿
• row-reverse：沿水平主轴从右到左排列，起点在右沿
• column：沿垂直主轴从上到下排列，起点在上沿
• column-reverse：沿垂直主轴从下到上排列，起点在下沿

flex-wrap

flex-wrap：容器内元素是否可以换行，它有三个属性值

• nowrap：默认值，不换行。当主轴的长度是固定并且空间不足时，项目尺寸会随之进行调整，但不会换行。
• wrap：换行，第一行在上面。
• wrap-reverse：换行，第一行在下面。

flex-flow

flex-flow是flex-direction属性和flex-wrap属性的简写，用处不大，最好还是分开来写。

justify-content

justify-content：元素在主轴的对齐方式，它有五个属性值

这里以水平方向为主轴进行举例，即flex-direction: row。

• flex-start：默认值，元素在主轴上左对齐（上对齐）
• flex-end：元素在主轴上右对齐（下对齐）
• center：元素在主轴上居中对齐
• space-between：元素在主轴上两端对齐，元素之间间隔相等。
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items

align-items：元素在交叉轴上的对齐方式，它有五个属性值

这里以水平方向为主轴进行举例，即flex-direction: row。

• stretch：默认值，如果元素未设置高度或设为auto，将占满整个容器的高度。
• flex-start：交叉轴的起点对齐（上面或左边）
• flex-end：交叉轴的终点对齐（下面或右边）
• center：交叉轴的中点对齐。
• baseline：以元素的第一行文字的基数对齐。

align-content

align-content：多根轴线对齐方式。如果元素只有一根轴线，该属性不起作用。它有六个属性值：

那这个轴线数怎么确定呢？实际上主要是由flex-wrap属性决定的，当flex-wrap 设置为 nowrap 时，容器仅存在一根轴线，因为项目不会换行，就不会产生多条轴线。当 flex-wrap 设置为 wrap 时，容器可能会出现多条轴线，这时就需要去设置多条轴线之间的对齐方式。

这里以水平方向为主轴时举例，即：flex-direction: row; flex-wrap: wrap;

• stretch：默认值，轴线占满整个交叉轴。（如果未设置高度，则会根据容器高度自动计算）
• flex-start：从交叉轴开始位置填充。
• flex-end：从交叉轴结束位置填充。
• center：与交叉轴中点对齐。
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
• space-arround：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

子元素属性

共有六个属性：

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

order

用来定义项目的排列顺序。数值越小，排列越靠前，默认为0。

flex-basis

定义了在分配多余空间之前，项目占据的主轴空间，浏览器会根据这个属性来计算主轴是否有多余空间。默认值为auto，即项目的本来大小。

当主轴设置为水平时，并且设置了 flex-basis，项目设置的宽度会失效。flex-basis需要跟 flex-grow和 flex-shrink配合使用才能生效。有两种特殊的值：

• 当 flex-basis 值为0%时，项目尺寸会被认为是0，因此项目尺寸设置多少都不起作用。
• 当 flex-basis 值为 auto 时，则根据尺寸的设定值来设置大小。

flex-grow

定义项目的放大比例，默认为0，即如果存在剩余空间时也不放大。

当容器中所有的项目都设置了flex-basis属性时，如果仍有剩余的空间，设置的flex-grow属性才能生效。

• 如果所有项目的flex-grow属性都设置为1，那么它们会均分剩余的空间。
• 如果其中一个项目的flex-grow属性值设置为2，其他均为1，那么该项目占据的剩余空间就是其他项目的两倍。

flex-shrink

定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。不能设置为负值。

• 如果所有项目的 flex-shrink 属性都为1，当空间不足时，都将等比例缩小。
• 如果一个项目的 flex-shrink 属性为0，其他项目都为1，则空间不足时，前者不缩小。

flex

flex-grow，flex-shrink 和flex-basis的简写，后两个属性可选。默认值为 flex: 0 1 auto。对于flex的取值，有以下几种特殊的情况：

1. flex: 0 1 auto：即在有剩余空间时，只放大不缩小
2. flex: none：即有剩余空间时，不放大也不缩小，最终尺寸通常表现为最大内容宽度。
3. flex: 0：即当有剩余空间时，项目宽度为其内容的宽度，最终尺寸表现为最小内容宽度。
4. flex: auto：即元素尺寸可以弹性增大，也可以弹性变小，具有十足的弹性，但在尺寸不足时会优先最大化内容尺寸。
5. flex: 1：即元素尺寸可以弹性增大，也可以弹性变小，具有十足的弹性，但是在尺寸不足时会优先最小化内容尺寸。

align-self

允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

这个属性和align-items属性的效果是一样的，只不过这个属性只对单个项目生效，而align-items是对容器中所有项目生效。