注意，例如img这种多媒体标签，不要用伸缩盒子来布局，设置宽100%即可；
display: flex; (父元素)
必须将父元素设置为伸缩盒子（弹性盒子）
在伸缩盒子中，默认子元素在一行显示，这是伸缩盒子的特点，与脱标无关！
为什么会一行显示？
在伸缩盒子中，有两条轴，一条主轴，一条侧轴。主轴：默认方向 - 水平从左向右侧轴：始终垂直于主轴在伸缩盒子中，子元素都是按照主轴方向显示的。
flex-direction: row; (父元素)
设置主轴方向
此时已然可以设置 padding 和 margin ；
row 行(横向)；
column 列(纵向)；
row-revers (横向反转，从右向左，类似右浮动)；
column-reverse(竖直反转)；
justify-content: flex-start; (父元素)
设置元素在主轴的对齐方式
flex-star;
从主轴的开始位置向右对齐显示
flex-end;
在轴的末端对齐
center;
主轴的居中位置处
space-between;
两端对齐，中间自适应
space-around;
环绕效果，子盒子左右两侧都有空白；
space-evenly; (ios专有)
把所有空白平均分配；
没有代码提示。
align-items: stretch; (父元素)
设置元素在侧轴的对齐方式；
只有当子元素全部在一行显示的时候才能用此属性；
子元素有换行的时候用align-content: stretch; (父元素)属性设置元素在侧轴的对齐方式。
其实，当元素多行显示的时候，依旧可以用此属性：
元素每一行都有自己的侧轴，当开启align-items的时候，元素在自己行的侧轴生效。
stretch; (默认)
stretch 拉伸的意思当子元素没有设置高度的时候，默认 stretch 拉伸为父容器的高度；
当子元素有高度的时候，就默认flex-start;
flex-start;
flex-end;
center;
flex-wrap: nowrap; (父元素)
在伸缩盒子中，元素如果超出父元素，默认不换行。可以给父元素设置此属性。
元素换行：当子元素有高度的时候，如果换 2 行，默认是侧轴的一半，3 行，则是侧轴的三分之一，以此类推，元素在此行的start位置。
nowrap;(默认)
wrap - 换行
align-content: stretch; (父元素)
设置元素换行后的对齐方式前提要保证元素是换行的
元素换行：当子元素有高度的时候，如果换 2 行，默认是侧轴的一半，3 行，则是侧轴的三分之一，以此类推，元素在此行的start位置。
flex-start;
flex-end;
center;
space-around;
space-between;
stretch; (默认)
space-evenly; (ios专有)
flex: 1; (子元素)
设置子元素所占父元素 剩余 空间的比例
注意是 剩余 ！！！
order
属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。