Flexible_Box_Layout 弹性布局布局。弹性盒子声明：
块级弹性盒子：display: flex;行级弹性盒子：display: inline-flex;演示效果：https://codepen.io/jerryjin/pen/ZEWqrOw
主轴：容器内元素方式的方向。交叉轴：垂直于主轴的方向。绝对定位：设置为绝对定位的元素不参与弹性布局。文本：文本节点受弹性布局控制。撑满剩余空间：设置了margin-< left | right >: auto;的元素可以平分剩余的间隙空间。flex-direction 应用于容器。定义主轴的方向（row,column）正反方向（*-reverse）。内部元素如何分布。
值说明row弹性容器的主轴被定义为与文本方向相同。 主轴起点和主轴终点与内容方向相同。row-reverse效果同row，只是反转了主轴起点和终点。（从右到左）column方向与row垂直。column-reverse效果同column，只是反转了主轴起点和终点（从下到上）flex-wrap 如果设置为多行，这个属性还允许你控制行的堆叠方向。 如果设置为单行，则元素会在一行内被压缩。
值说明nowrap不换行wrap放不下就换行（正常从上往下）wrap-reverse效果同 wrap，开始和结束点反转。（从下往上换行） flex-flow：两个属性 flex-direction、flex-wrap两个属性合并简写。同时设置方向和换行。 flex-flow : row warp;justify-content 应用于容器。分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间。
值示意元素：■空间：□说明flex-start^■■■□$从行首开始排列。每行第一个【弹性元素】与行首对齐，同时所有后续的【弹性元素】与前一个对齐。flex-end^□■■■$从行尾开始排列。每行最后一个【弹性元素】与行尾对齐，其他元素将与后一个对齐。center^□■■■□$元素从弹性容器中心开始。（每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同）space-between^■□■□■$第一个靠头，最后一个靠尾，其它平分空间。space-around^□■□□■□□■□$剩余空间平分给每个元素，每个元素的空间平分给左右。space-evenly^□■□■□■□$边界到元素，元素到元素，的空间都相等。align-items 用于控制容器元素在交叉轴上的排列方式。
值说明stretch元素被拉伸以适应容器。center元素位于容器的中心flex-start元素位于容器的交叉轴开头flex-end元素位于容器的交叉轴结尾align-content 弹性容器设置为多行，当交叉轴上有多余的空间时，它控制元素如何对齐。
选项说明stretch将空间平均分配给元素flex-start元素紧靠主轴起点flex-end元素紧靠主轴终点center元素从弹性容器中心开始space-between两头靠紧，中间平分。第一个元素靠起点，最后一个元素靠终点，余下元素平均分配空间space-around每个元素两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍space-evenly元素间距离平均分配演示效果：https://codepen.io/jerryjin/pen/XWdxQRq 主轴排列方式 + 伪类选择器演示
优先级大于 width、height。如果不使用 box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。
align-self 应用于元素上，控制元素自己身在交叉轴上的排列方式。与align-items 的区别在于 align-items 应用于容器上，控制的是容器中所有元素。 参数与 align-items 相同。
flex-grow 控制元素拉伸，当有剩余空间时，如何分配？权重值，按份数分即可。
优先级高于 height、width。常见的为 1 大家平分。未设置的元素不参与扩展。flex-shrink 控制在空间不够时咱们怎么缩？ 缩放因子 = 需要收缩的总宽度 / (所有元素 * 自身flex-shrink)之和 * 自身flex-shrink 缩放宽度 = 自身宽度 * 缩放因子
演示效果：https://codepen.io/jerryjin/pen/BaKGBaR
order 控制元素的位置，数值从小到大，取值期间 0和整数。
值相同时按照元素在源代码中出现的顺序排。只影响显示顺序，不影响逻辑顺序（可以tab键试试效果）演示效果：https://codepen.io/jerryjin/pen/oNxadZV 显示顺序CBDA但逻辑上还是ABCD
MDN：CSS 弹性盒子布局 MDN：CSS属性值定义语法
