CSS弹性（flexible）盒子
弹性盒子
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成
弹性容器通过display:flex | inline-flex将其定义为弹性容器
弹性容器内包含了一个或多个弹性子元素
弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行
让元素产生一个块级的flex容器盒子。flex容器中的孩子被称为flex items，且用flex布局模型布局
- flex布局是基于flex directions（决定主轴/侧轴方向）
主轴：main axis 纵轴：cross axis
横向边界：main start main end
纵向边界：cross start cross end
主轴方向（宽度）不会扩展但是会收缩，而侧轴方向（高度）（未设置时）会进行扩展
- start和end线
弹性盒子中文字的方向不再是由左右决定，而是由start和end线决定。如果flex-direction为row且是英文系统，则主轴的start边在左侧，而end边在右侧。而如果是Arabic系统，这两条线位置是相反的
- 子元素设置position:absolute
该子元素不参与弹性布局，而是根据弹性容器的content-box进行布局
属性
| 说明 | 应用于 | 默认值 | 说明 |
| flex-direction | 弹性容器（控制子元素布局方向和间距） | row | 决定了主轴位置及其方向，row表示水平方向，column表示垂直方向 |
| flex-wrap | no-wrap | 定义弹性元素是旋转在同一行还是分成多行 flex-flow: row nowrap 是flex-direction和flex-wrap的缩写 |
|
| align-content | stretch |
侧轴方向元素行的布局，对于单行无效 默认值stretch：如果行内子元素的大小总和小于容器，那么大小为auto的就会自动扩展（但仍限于max-height/max-width） |
|
| align-items | stretch |
侧轴方向弹性元素的布局，默认stretch，所以侧轴方向会自动扩展充满容器 区别：align-items关注当前弹性容器行内元素的布局；而align-content关注行的布局 |
|
| justify-content | flex-start | 定义主轴方向上的元素间的间距布局 | |
| align-self | 弹性子元素（调整大小和顺序） | auto | 在当前弹性行中重写元素的align-items值 |
| flex-basis | auto | 定义一个弹性元素（根据box-sizing的值，默认是content-box）盒子的主轴空间大小 | |
| flex-grow | 0（比例值） |
定义一个弹性元素扩展的比例，相对于弹性盒子中剩余空间的大小（最终大小=扩展+原来设置的）。它决定了子元素在弹性盒子中应该占据的大小 不同的item有不同的比例，需要根据比例间关系进行划分。如4:2=2:1，所以这两个设置是相同的 |
|
| flex-shrink | 1（比例值） |
当弹性元素总大小大于弹性盒子，则元素会根据flex-shrink相对于正常布局时超过的部分大小收缩以充满容器 flex: 0 1 auto是flex-grow, flex-shrink, flex-basis的合并 |
|
| order | 0 | 根据order的值升序定义元素出现的顺序。如果order值一样，则根据源码中出现的顺序 |
参考：
https://drafts.csswg.org/css-flexbox-1/#flex-container
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
