Background
挺久没有用 css 的了，关于 flex 的一些 api 遗忘了一些。 最近重新阅读了一些 mdn 的文章，对 flex 有了一点新的理解。 这篇文章不会介绍关于 flex 具体 api 的而是编织一个故事关于 flex 一些 api 的设计。
flex 是什么
flex 是一个一维的布局模型。 可以通过 flex-direction 来控制这个布局模型的方向
为什么我看到 flex 可以变成一个多行的模型？
flex 当中有一个 wrap 属性，他表示 flex-item 在超越 flex 容器的之后的布局行为。
实际上当 flex-item出现换行的时候，每一行都相当于是一个 flex 容器一样。 由此我们可以用 flex=col的方式，自动按照每行来进行布局划分
flex容器内部的布局方式是什么
首先我们在编写 html 文件的时候，编写元素的先后顺序代表了元素在 flex 容器里面的主轴顺序（当然我们可以对此进行调整，但这后续再说），所以我们更需要的是这个元素在 flex 容器的非主轴顺序的排序规则。
align-self在元素上我们可以设置这个属性，进行非主轴上的排序。align-items在 flex 容器里来默认设置所有元素的 align-self属性
等等，我们刚才说了 flex 其实是可以表示多行的，每行相当于新的一个 flex 容器。 那么不同行之间（也就是非主轴上）应该如何布局呢？
align-content我们可以通过这个属性表示换行之后不同行之间的排序方式（包括 space-between等）
ok 让我们会过来看看主轴上是怎么排序的。还是回到 flex 是一个一维的模型，也就是说他在主轴方向上仅存在一个元素，一个 content，而不是grid 的多维。
justiyf-content我们可以用这个属性来设置 主轴方向怎么进行排序的，包括从哪里开始，具体怎么利用剩余的空间
如果 grid 是多维的应该怎么处理？ 这意味着我们在主轴方向存在多个 content，那么我们可以以利用 self 属性来设置在这个容易里面的位置
justify-self在这个元素上可以设置元素内的主轴方向上的位置跳着
flex 主轴排序的一些问题
由于 flex 默认主轴方向上只有一个元素，只能进行统一的设置，无法做到同一行内多个元素的设置。比如我们希望一行之内，左边三个元素在最左侧，右边两个元素在最右侧的布局，justify-content不能帮我们实现
我们可以利用 margin：auto 来让 margin 默认占据 flex grow 的所有空间。
