CSS笔记——弹性布局(flex弹性盒模型)

一、flex弹性盒模型

元素只要声明了display: flex;，那么这个元素就成为了弹性容器，具有flex弹性布局的特性.

每个弹性容器都有两根轴：主轴和交叉轴，两轴之间成90度关系。注意：水平的不一定就是主轴。

每根轴都有起点和终点，这对于元素的对齐非常重要。

弹性容器中的所有子元素称为<弹性元素>，弹性元素永远沿主轴排列。

弹性元素也可以通过display:flex设置为另一个弹性容器，形成嵌套关系。因此一个元素既可以是弹性容器也可以是弹性元素。

二、主轴

1. 主轴的方向

flex-direction: row | column | row-reverse | column-reverse 主轴方向: 行(从左到右)、列(从上到下)、行反转(从右到左)、列反转(从下到上)

2. 沿主轴的排列处理

flex-wrap: nowrap | wrap | wrap-reverse 主轴上的元素不折行、折行、反向折行

3. 复合属性

flex-flow = flex-drection + flex-wrap

flex-flow相当于规定了flex布局的“工作流(flow)”

flex-flow: row nowrap;

三、元素如何弹性伸缩应对

当flex-wrap: nowrap;不折行时，容器宽度有剩余/不够分，弹性元素们该怎么“弹性”地伸缩应对？

#container {

display: flex;

flex-wrap: nowrap;

}

元素属性(需应用在弹性元素上)

1. flex-grow： 放大比例（容器宽度>元素总宽度时如何伸展），默认值为0，即如果存在剩余空间，也不放大。多个元素按flex-grow的比例放大。

2. flex-shrink：缩小比例（容器宽度<元素总宽度时如何收缩），默认值为1，即如果空间不足，元素将缩小。多个元素按flex-shrink的比例缩小。为0时不缩小。

3. flex-basis: 分配多余空间前，元素占据的主轴空间大小。默认值为auto，即项目的本来大小。如果设置固定值，则元素占据固定空间。

4. flex: 是flex-grow,flex-shrink,flex-basis的简写，默认值是 0 1 auto。或者使用: auto(1 1 auto)，none(0 0 auto)

四、弹性处理与刚性尺寸 flex-basis

在进行弹性处理之余，其实有些场景我们更希望元素尺寸固定，不需要进行弹性调整。设置元素尺寸除了width和height以外，flex还提供了一个flex-basis属性。

flex-basis设置的是元素在主轴上的初始尺寸，所谓的初始尺寸就是元素在flex-grow和flex-shrink生效前的尺寸。

默认值为auto，即项目的本来大小。如果设置固定值，则元素占据固定空间。

五、容器内如何对齐

1. 主轴上的对齐方式

justify-content

2. 交叉轴上的对齐方式

(1).交叉轴上的单行对齐

align-items

默认值是stretch，当元素没有设置具体尺寸时会将容器在交叉轴方向撑满。

当align-items不为stretch时，此时除了对齐方式会改变之外，元素在交叉轴方向上的尺寸将由内容或自身尺寸（宽高）决定。

(2).交叉轴上的多行对齐

通过flex-wrap: wrap使得元素在一行放不下时进行换行。在这种场景下就会在交叉轴上出现多行，多行情况下，flex布局提供了align-content属性设置对齐。

align-content与align-items比较类似，同时也比较容易迷糊。下面会将两者对比着来看它们的异同。

首先明确一点：align-content只对多行元素有效，会以多行作为整体进行对齐，容器必须开启换行。

align-content: stretch | flex-start | flex-end | center | space-between | space-around

align-items: stretch | flex-start | flex-end | center | baseline

在属性值上，align-content比align-items多了两个值：space-between和space-around

六、其他

order：更优雅地调整元素顺序

order：可设置元素之间的排列顺序

数值越小，越靠前，默认为0

值相同时，以dom中元素排列为准

七、flex布局属性汇总

容器属性

flex-flow

flex-direction

flex-wrap

justify-content

align-items

align-content

元素属性

order

flex-grow

flex-shrink

flex-basis

flex

align-self