CSS Flex 布局的 flex-direction 属性讲解
flex-direction 设置了主轴，从而定义了弹性项目放置在弹性容器中的方向。
Flexbox 是一种单向布局概念，可将弹性项目视为主要以水平行或垂直列布局。
.container {
flex-direction: row | row-reverse | column | column-reverse;
}几种支持的属性：
- row (default): left to right in ltr; right to left in rtl
- row-reverse: right to left in ltr; left to right in rtl
- column: 和 row 属性工作原理相同，只不过是从 top 到 bottom 布局
- column-reverse: 同 row-reverse，只不过是从 bottom 到 top
flex-grow 属性
该属性定义了 flex item 在必要时增长宽度的能力。它接受一个作为比例的无单位值。 它规定了项目应该占用弹性容器内的可用空间量。
下图第一行，三个元素的 flex item 的 flex-grow 都为 1，因此共同平分 flex 容器剩余的宽度。
下图第二行中间的 flex item 的 flex-grow 属性为 2，其他两个元素为 1，因此宽度比例为1：2：1.
如果所有项目都将 flex-grow 设置为 1，则容器中的剩余空间将平均分配给所有子项。 如果其中一个 item 元素的值为 2，则该 item 将占据其他 item 的两倍空间（或者至少会尝试）。
justify-content
该属性定义了沿主轴的对齐方式。 当一行中的所有 flex 项目已达到其最大大小时，它有助于分配剩余的额外可用空间。 当项目溢出线时，它还对项目的对齐施加一些控制。
- flex-start（默认）：项目被打包到 flex-direction 的开始。
- flex-end：项目被打包到 flex-direction 的末端。
- start: items 被打包到 writing-mode 方向的开始。
- end：项目被打包到书写模式方向的末尾。
- left：项目被打包到容器的左边缘，除非这对 flex-direction 没有意义，否则它的行为就像开始。
- right：项目被打包到容器的右边缘，除非这对 flex-direction 没有意义，否则它的行为就像 end。
- 中心：项目沿线居中
- space-between：项目在行中均匀分布； 第一项在开始行，最后一项在结束行
- space-around：项目均匀分布在一行中，周围的空间相等。 请注意，从视觉上看，空间并不相等，因为所有项目的两侧都有相等的空间。 第一个项目将在容器边缘有一个空间单位，但下一个项目之间有两个单位的空间，因为下一个项目有自己适用的间距。
- space-evenly：项目分布使得任意两个项目之间的间距（以及到边缘的空间）相等。
