共计 1165 个字符，预计需要花费 3 分钟才能阅读完成。
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：我的项目散布使得任意两个我的项目之间的间距（以及到边缘的空间）相等。
正文完