本篇主要是对 css-tricks.com/snippets/cs… 的翻译，并加以自己的理解。

1 flex布局的用途

让容器能够自行调整item的宽高，来填充可用空间，适应不同的显示设备与屏幕大小。一个弹性容器可以扩展item适应空间也可以收缩item防止溢出。

与常规布局（inline与block）相比，flex布局与方向无关。虽然block与inline在页面上工作得很好，但它们缺乏支持大型或复杂应用程序的灵活性(特别是在改变方向、调整大小、拉伸、收缩等方面)。

Flex布局最适合应用程序的组件和小规模布局，而网格布局则适合较大规模的布局。

2 基本概念与术语

容器（父元素）：container
子元素：flex item flex布局方向基于flex-flow directions

items要么沿着主轴（main axis）从main-start到main-end的方向，要么沿着侧轴（cross axis），从cross-start 到 cross-end。 注意，main-axis不一定是水平的,cross-axis也不一定是竖直的，它取决于flex-direction属性

main size：item在主轴方向上的长度
cross szie：item在侧轴方向上的长度

3 容器的属性

3.1 diaplay

使用flex布局，需设置容器的display属性为flex。

.container {
  display: flex; /* or inline-flex */
}

3.2 flex-direction

定义了主轴的方向

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

几种不同的取值（当容器的dir属性为ltr从左至右时）：

row(flex-direction默认值):
row-reverse:
column:
column-reverse:

3.3 flex-wrap

默认情况所有flex item都会挤到一行里，修改flex-wrap便能改变这种规则。

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap(默认值)：所有items挤在一行
wrap：沿着top到bottom的方向分成多行

wrap-reverse：沿着bottom到top方向分成多行

3.4 flex-flow

同时定义flex-direction flex-wrap，

.container {
  flex-flow: column wrap;
}

3.5 justify-content对齐方式

用于定义沿着主轴方向的对齐方式

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

flex-start为其默认值效果：