什么是弹性盒子？

弹性盒子是CSS3的一种新的布局模式。

设置弹性盒子——display属性

display: flex; 将对象作为块级弹性伸缩盒显示

display: inline-flex; 将对象作为内联块级弹性伸缩盒显示

容器属性：

flex-direction属性：设置主轴的方向，子元素的排列方向

• flex-direction: row; 默认值，主轴方向为水平方向，起点在左端

• flex-direction: row-reverse; 主轴方向为水平方向，起点在右端

• flex-direction: column; 主轴方向为垂直方向，起点在上方

• flex-direction: column-reverse; 主轴方向垂直方向，起点在下方

justify-content 属性：设置主轴的对齐方式,弹性子元素在主轴方向上的对齐方式,

• justify-content: flex-start; 默认值，主轴顶端对齐

• justify-content: flex-end; 主轴的末端对齐

• justify-content: center; 居中对齐，子元素位于弹性容器的中心

• justify-content: space-between; 两端对齐，子元素和子元素之间有空白空间,项目之间的间隔都相等。

• justify-content: space-around; 四周对齐，子元素之前、之间、之后都留有空白空间，且空间自行分配,项目之间的间隔比项目与边框的间隔大一倍。

align-items属性：弹性子元素在（侧轴）交叉轴上的对齐方式t

• aign-items: stretch; 默认值，如果弹性子元素没有高度或高度为auto，将占满整个容器的高度

• align-items: flex-start;子元素在侧轴顶端对齐

• align-items: flex-end; 子元素在侧轴末端对齐

• align-items: center; 子元素在侧轴中间对齐

• align-items: baseline; 子元素在第一行文字的基线对齐

弹性盒子水平水平居中

justify-content: center; 主轴上子元素的对齐方式
    - align-items: center; 交叉轴上子元素的对齐方式