Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。

flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。

创建flex容器：display:flex;

flex布局有两根轴线-主轴和交叉轴。主轴由 flex-direction 定义,另一根轴垂直于它。

flex-direction:row/row-reverse/column/column-reverse; 设置方向

flex-wrap:wrap/onwrap; 设置换行

flex-flow:row wrap; flex-direction和flex-wrap的简写

align-item:streth/flex-start/flex-end/center;设置元素在交叉轴的对齐和空间分配

justify-content:streth/flex-start/flex-end/cente/space-around/spece-betweed;设置元素在主轴的对齐和空间分配

flex元素上的属性

flex-basis 属性在任何空间分配发生之前初始化弹性元素的尺寸。初始值为auto

如果flex-basis设置为auto,浏览器会先检查元素的主尺寸是否设置了绝对值再计算出它们的初始值。比如说你已经给你的元素设置了 200px 的宽，则 200px 就是这个元素的flex-basis。

没有给出初始值弹性盒子会将元素的max-content大小作为flex-basis

flex-grow 属性指定了弹性增长因子（flex grow factor），这决定了在分配正可用空间时，弹性元素相对于弹性容器中的其余弹性元素的增长程度。

弹性元素总宽度小于弹性容器宽度时可以指定每个弹性元素分配剩余可用空间

flex-shrink 属性指定了弹性收缩因子（flex shrink factor），它确定在分配负可用空间时，弹性元素相对于弹性容器中其余弹性元素收缩的程度

弹性元素总宽度大于弹性容器宽度时可以指定每个弹性元素收缩空间

flex:1 =>flex:1 1 0 (flex-grow flex-shrink flex-basis)