你对弹性盒了解的全吗？

弹性盒：是css3新增加的一种布局形式，目的是当页面在不同的屏幕尺寸上去显示时，使元素拥有恰当的显示效果

弹性盒有两部分组成：弹性容器及弹性子元素

弹性父元素：

弹性容器设置：display:flex;
弹性子元素在主轴上的对齐方式：justify-content：flex-start\center\flex-end\space-between\space-around（如果子元素自左向右排列，主轴是x，自上而下时主轴是y）
弹性子元素的排列方式：flex-direction：
弹性子元素在侧轴上的对齐方式：align-items
弹性子元素是否允许换行显示：flex-wrap:nowrap（默认值）
弹性子元素行的设置align-content（必须与flex-wrap连用）

弹性子元素：

弹性子元素在父元素中所占分数flex
弹性子元素占剩余空间的分数flex-grow
弹性子元素的宽度 flex-basis 相当于width
弹性子元素的缩放flex-shrink 默认为1允许 0 不允许
弹性子元素的排列顺序order 值越小与靠前（可以设置为负值）
单独设置弹性子元素align-self：