更好的理解flex布局

声明：本文是对下面这篇文章的补充和概括，并把一些直接由英文翻译过来的概念用更容易理解的话进行解释。原文写的很不错，值得一读，读完后不妨也来看看我这篇，定会有新的收获。

30 分钟学会 Flex 布局 - 知乎 (zhihu.com)

flex布局

先明确几个概念：

1. 主轴可以有很多根，但是他们都是平行的，而且方向一致

1. 交叉轴就一根，就是与主轴方向垂直的那根，交叉轴 和 交叉轴方向  其实算是一个概念

2. 排列方式指的是宏观的看一个容器内部，多个元素的分布方式，就像小学做早操的时候，老师总会要求我们人与人之间保持一臂的举例，集合的时候向前靠拢，并且人与人之间一拳的距离，这叫做排列方式

3. 对齐方式指的是容器内部，元素与元素之间的位置关系（很抽象），就是做早操的时候，老师都会让你和前面的人对齐，这里的对齐有可能你会用你的右肩膀与前面同学的后脑勺对齐。

以下的讨论基于：flex-direction：row ，即容器的主轴是横着的（平行于你浏览器的导航栏）

容器的属性：

flex-direction

表明主轴的方向

flex-wrap

只有设置了这个属性，才会出现多根主轴这种情况

设置了换行后，一根主轴上放不下元素了，就会换行，也就是“生成一条主轴”，把之前放不下的元素放到这条新生成的主轴上

justify-content

这个属性主要是用于确定主轴线方向上的元素的排列方式

align-items

在同一根主轴上的元素（项目）在交叉轴方向上的对齐方式

换句话说，如果一根主轴上的元素的height都是一样的，而且里面文字大小也一样，那么这个属性设置了也是看不出效果的

align-content

当有多根主轴时候，把一根主轴上的所有元素看成一个大元素，这个元素就是定义这些大元素在交叉轴方向上的排列方式

总结起来就是：主轴之间（在交叉轴方向上的）的排列方式

小总结：

1. 带有align的一般都是指的交叉轴方向

2. 带有justify的一般都是指的主轴方向

3. 带有content的一般都是设置排列方式

4. 带有item的一般都是设置对齐方式

元素的属性：

order

单独定义元素在容器中的顺序，数值越小，排列越靠前，默认值为 0

align-self

这里出现了align如我们上面说的， 指的是交叉轴方向，这里的self指的当然就是这个元素本身，这个属性允许我们单独指定某个元素，在交叉轴方向上的对齐方式，与这个属性很相似的是起面的align-items属性，align-self 会让一个元素脱离容器上的align-items的控制

flex-basis

这个属性指的是这个元素在主轴方向上占据的位置大小，这里指的是width，同时在元素上设置width和flex-basis，width的值会失效，这个属性和width很类似，除了flex-basis会随着flex-direction的切换在width和height之间切换。不过我不太建议用这个属性，直接用width/height就好了（大家有发现这个属性的妙用的可以评论区留言）

flex-grow

这个属性的默认值是0，不能小于0

这里我们要弄清楚，grow（增长）了多少？

这里又要用到讲align-content 时候的一个概念，就是把主轴方向的一行看成是一个“大元素”，这个大元素的剩余空间就会被用来分配给设置了flex-grow属性的元素。

假设剩余了300px，有两个元素（“大元素”里的小元素）设置了flex-glow属性，值分别为1和2，那么这两个元素占据主轴的空间（元素的本身的width或者是flex-basis）就会分别增加1/3*300px和2/3*300px。

有些人会把这个属性和flex-warp联系起来，这样会显得更复杂，最简单的就只要关注这个“大元素”还剩多少空间，然后拿去分配就好了。

如果一根主轴上没剩余空间，那么这个属性就没啥用

flex-shrink

这个属性和flex-grow类似，一个是增长一个是收缩，默认值是1，不能负数，值越大收缩的越明显。为0代表即使空间不够了也不缩小。

默认是1，表明空间不够了每个元素就会开始等比例收缩，而且收缩的量和元素占据主轴的空间有关（这里指的是width），在flex-shrink相同的情况下，width大的收缩的量就大，反之就小。

这个属性起作用的情况只有一种情况，那就是一根主轴上的空间（“大元素”的宽度）内部元素宽度的总和，而且不能换行（flex-wrap：nowrap）。只有这种情况下flex-shrink不为0的元素才会进行缩小（注意：这个元素默认就有设置的，值为1）。

这其实很好理解，主轴空间不够了首先想到的是换行，换行了空间就又够了，就不会触发flex-shrink，要是换行行不通，就会考虑缩小内部的元素在主轴方向上的尺寸。