背景
Flexbox 布局 (Flexible Box) 模块 （目前是 W3C 的一个最后征集工作草案(Last Call Working Draft)）旨在提供一种更有效的方式，在容器的项之间处理布局、对齐和空间分配，即使它们的大小未知并且/或是动态变化的（因此叫做“flex”）。
Flex 布局背后的主要思想是让容器能够改变其项的宽度/高度（和顺序），以最好地填充可用空间（主要是为了适应各种显示设备和屏幕大小）。一个 flex 容器扩大其项来填充可用的空闲空间，或者缩小它们以防止溢出。
最重要的是，flexbox 布局与常规布局（基于垂直的块（block）、基于水平的内联（inline））截然相反，flexbox 布局是方向无关的。虽然常规布局工作很适合页面，但它们缺乏灵活性（没有双关语）来支持大型或复杂的应用程序（特别是当涉及到方向变化、大小调整、拉伸、收缩等）时。
注意：Flexbox 布局最适合应用程序的组件和小型布局，而网格布局则适合更大规模的布局。
基础和术语
由于 flexbox 是一个完整的模块，而不是一个单独的属性，它涉及到很多东西，包括它的全部属性。其中一些是要在容器上设置的（父元素，称为“flex容器”），而其他的则是设置在子元素上（称为“flex项/元素”）。
如果常规布局是基于块（block）和内联（inline）流方向，那么 flex 布局则基于“flex流方向（flex-flow direction）”。 请看一看规范中的下图，其解释了 flex 布局背后的主要思想。
基本上，弹性项（flex items）将沿着主轴（main axis）（从 main-start 到 main-end）或侧轴（cross axis）（从 cross-start 到 cross-end）布局。
- main axis - flex容器的主轴是主要的轴，flex项被沿其放置。当心，它不一定是水平的；这取决于 flex-direction 属性的值（见下）。
- main-start | main-end - flex 项放在容器内，从 main-start 到 main-end。
- main size - 一个弹性项的宽度或高度，任何一个在主维度上，就是这个项的主尺寸。flex 项的 main size 属性是“宽度”或“高度”属性之一，任何一个都可以是 main size。
- cross axis - 垂直于主轴的轴称为横轴。它的方向取决于主轴方向。
- cross-start | cross-end - Flex行充满了flex项，并将其放置到容器中，行开始于Flex容器的 cross-start 端，并向 cross-end 端方向前进。
- cross size - 一个 flex 项的宽度或高度，任何一个在侧维度上，就是该项的 cross size。cross size属性是在侧维度上的“宽度”或“高度”中其一。
| 
Properties for the Parent (flex container) |
Properties for the Children (flex items) |
# display
定义一个 flex 容器；inline 或 block 取决于给定的值。它为所有直接的子元素提供一个 flex 上下文。
.container {
display: flex; /* or inline-flex */
}
# flex-direction
确定主轴, 用来定义 flex 容器中的 flex 项的放置方向。Flexbox 是（除了可选的 wrap）一个单向布局概念。可以将 flex 项看作主要是在水平的行或垂直的列中布局的。
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
- row (default): 从左到右（如果元素的 dir 属性为 ltr）；从右到左（如果元素的 dir 属性为 rtl）
- row-reverse: 从右到左（如果元素的 dir 属性为 ltr）；从左到右（如果元素的 dir 属性为 rtl）
- column: 自上而下
- column-reverse: 自下而上
# flex-wrap
默认情况下，flex 项都将尝试放置在一行上。你可以根据需要使用该属性来更改默认行为以支持换行。
.container{
flex-wrap: nowrap | wrap | wrap-reverse;
}
- nowrap (default): 所有 flex 项位于一行中
- wrap: flex 项将从上到下多行排列
- wrap-reverse: flex 项将从下到上多行排列
# flex-flow (适用于：父 flex 容器元素)
这是一个简化的 flex-direction 和 flex-wrap 属性，它们一起定义了 flex 容器的主和侧轴。默认是 row nowrap。
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
# justify-content
该属性定义了浏览器如何分配顺着父容器主轴的弹性元素之间及其周围的空间。它帮助分配剩余的空闲空间当无论在一行中的所有 flex 项是固定大小的还是弹性的但是达到它们的最大尺寸的时候。 当它们溢出行时，
该属性也能这些项的对齐方式发挥一些控制作用。
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
- flex-start (default): 从行首开始排列。每行第一个弹性元素与行首对齐，同时所有后续的弹性元素与前一个对齐
- flex-end: 从行尾开始排列。每行最后一个弹性元素与行尾对齐，其他元素将与后一个对齐
- center: 伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同
- space-between: 在每行上均匀分配元素；第一个元素位于行首，最后一个元素位于行尾
- space-around: 元素在行内均匀分布，在元素周围的间距相等。注
|
