弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 将其定义为弹性容器，设置成flex布局之后，子元素float浮动属性会失效，position定位属性仍然可用。
flex-direction
主轴方向，默认值row 不换行，从左到右;
/* flex-direction: row; /
/ row-reverse 从右到左; /
/ flex-direction: row-reverse; /
/ row-reverse 从上到下; /
/ flex-direction: column; /
/ row-reverse 从下到上; /
/ flex-direction: column-reverse; */
flex-wrap
换行，默认值nowrap 不换行;
/* flex-wrap: nowrap; /
/ flex-wrap: wrap; /
/ 上下行颠倒 /
/ flex-wrap: wrap-reverse; */
justify-content
定义主轴水平方向对齐方式，默认值flex-start 左对齐;
/* justify-content: flex-start; /
/ flex-end 主轴水平方向右对齐 /
/ justify-content: flex-end; /
/ center 主轴水平居中 /
/ justify-content: center; /
/ flex布局仍然遵守标准文档流 /
/ space-between 首尾子元素靠边对齐，相邻子元素间距相等 /
/ justify-content: space-between; /
/ space-around 子元素 左右的距离保持一样 相邻子元素之间的距离会变成2倍*/
/* 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍 /
/ justify-content: space-around; /
/ space-evenly 子元素相邻的距离保持一致 /
/ justify-content: space-evenly; */
align-items
定义项目在交叉轴上对齐方式
/* 垂直方向居中 /
/ align-items: center; /
/ 垂直方向的顶部 交叉轴的起点对齐 /
/ align-items:flex-start; /
/ 垂直方向的底部 交叉轴的终点对齐*/
/* align-items: flex-end; /
/ baseline: 项目的第一行文字的基线对齐 /
/ 垂直方向按照子元素的文字所在的底部位置进行对齐 /
/ align-items: baseline; /
/ stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度*/
/* align-items: stretch; */
