css --- flex 布局

1、flex 弹性盒模型

对某个元素只要声明了 display: flex，那么这个元素就成为了“弹性容器”。

1）每个弹性容器都有两根轴：主轴和交叉轴，两轴垂直。注意：水平的不一定是主轴；
2）每根轴都有起点和终点，这对于元素对齐非常重要；
3）弹性容器中的所有子元素称为<弹性元素>，弹性元素永远沿主轴排列；
4）弹性元素也可以通过 display: flex 设置为另一个弹性容器，形成嵌套关系。因此一个元素既可以是弹性容器也可以是弹性元素。

2、主轴

flex 布局为一维布局模型，一次只能处于一个维度（一行或者一列）上的元素布局，作为对比有二维布局 CSS Grid Layout，可以同时处理行和列上的布局。
也就是说，flex 布局大部分的属性都是作用于主轴的，在交叉轴上很多时候只能被动的变化。

2-1 主轴的方向

通过 flex-direction 来修改主轴方向，如果主轴方向修改了，那么：
1）交叉轴会相应地旋转90度；
2）弹性元素的排列方式也会发生改变，因为弹性元素永远沿主轴排列。

flex-direction: row / row-reverse / column / column-reverse（四个选项）；

2-2 沿主轴的排列处理

弹性元素永远沿主轴排列，那么如果主轴排列不下，该如何处理？
通过设置 flex-wrap 可使得主轴上的元素不折行、折行、反向折行。

flex-wrap: nowrap / wrap / wrap-reverse（三个选项）；

2-3 一个复合属性 flex-flow

flex-flow = flex-direction + flex-wrap，例如：flex-flow: row nowrap;

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

当 flex-wrap: nowrap 不折行时，容器宽度有剩余 / 不够分，弹性元素们该怎么“弹性”地伸缩应对？据此需要引入两个属性：

flex-shrink: 缩小比例（容器宽度<元素总宽度时如何收缩）
flex-grow: 放大比例（容器宽度>元素总宽度时如何伸展）

3-1 缩小比例

一个场景下，弹性容器宽度200px，一共有三个弹性元素，宽度分别为：50px、100px、120px，在不折行的情况下，此时容器宽度明显是不够用的。

flex-shrink 默认为1，也就是当不够分配时，元素都将等比例缩小，占满整个宽度。

3-2 放大比例

一个场景下，弹性容器宽度为200px，但此时只有两个弹性元素，宽度分别为：50px、100px，此时容器宽度是有剩余的。

在 flex 布局中，容器剩余宽度默认是不进行分配的，也就是说：flex-grow 默认为0；指定flex-grow 为大于0的值，实现容器剩余宽度的分配比例设置。

例如：flex-grow: 3 给第一个元素；flex-grow: 2 给第二个元素。
无多余宽度时，flex-grow 无效

4、弹性处理与刚性尺寸

4-1 两者均为0

结果：

4-2 两者非0

结果：

4-3 flex-basis 为 auto

结果：

 

4-4 flex-basis == 主轴上的尺寸 != width

 

结果：

4-5 常用的复合属性（flex = flex-grow + flex-shrink + flex-basis）

flex: 1 = flex: 1 1 0%
flex: 2 = flex: 2 1 0%
flex: auto = flex: 1 1 auto;
flex: none = flex: 0 0 auto; // 常用于固定尺寸，不伸缩

flex:1 和 flex:auto 的区别：

其实可以归结于flex-basis:0和flex-basis:auto的区别。flex-basis是指定初始尺寸，当设置为0时（绝对弹性元素），此时相当于告诉flex-grow和flex-shrink在伸缩的时候不需要考虑我的尺寸；相反当设置为auto时（相对弹性元素），此时则需要在伸缩时将元素尺寸纳入考虑。

5、容器内如何对齐

主轴上的对齐方式：justify-content；

交叉轴上的对齐方式：align-items(单行对齐)

align-content只对【多行元素】有效，会以多行作为整体进行对齐，容器必须开启换行。

具体的办法，需要结合实际进行验证。

个人统计【2】：2019-05-25、2019-05-26