一、弹性盒子

• 容器盒子里面包含着容器元素，使用 display:flex 或 display:inline-flex 声明为弹性盒子。

元素排列方向

自适应换行

注意 ：flex-flow 是 flex-direction 与 flex-wrap 的组合简写模式

flex-flow: row-reverse wrap-reverse;

元素主轴排列方式

元素交叉轴排列方式

注意；如果设置了 width | height | min-height | min-width | max-width | max-height ，将影响stretch 的结果，因为 stretch 优先级你于宽高设置。

元素交叉轴多行（flex-wrap:wrap）排列方式

单个元素交叉轴排列方式

自动分配余下空间

用于将弹性盒子主轴的可用空间，分配给弹性元素。flex-grow:1; 可以用小数或整数

空间不足缩小比例

如果全部设置flex-shrink:0; 都不缩小，单个可以整数或者小数设置缩小比例

定义元素基准尺寸宽高

可以是长度单位，也可以是百分比。flex-basis的优先级高于width、height属性，小于max-height,min-height。

注意：flex是flex-grow、flex-shrink 、flex-basis缩写组合。flex:1 1 200px;

改变单个元素顺序

用于控制弹性元素的位置，默认为 order:0 数值越小越在前面，可以负数或整数。