flex布局与响应式适配

弹性容器：设置为弹性容器的方法：display：flex；里面的子元素会按照弹性布局
弹性子元素：弹性容器里的直接子元素（第一层子元素，后代元素不算）；
子元素：默认排列成一行，不会换行，如果父元素宽度不够，会发生按比例压缩
如果父元素高度不够，子元素高度会溢出
弹性布局属性：
主轴：

flex-direction:  ; 设置主轴方向
row;  默认值，按行排列，从左到右
row-reverse;
column; 按列排列 从上到下

主轴上元素的对齐方式

justify-content:start; 默认值，向主轴开始位置靠拢
center;向主轴中心位置靠拢（类似的有flex-start，flex-end）
space-around;平均分布，两边有间距
space-between;平均分布，两边没间距
space-evenly;（新）平均分布，两边间距和中间一样宽

内容在侧轴上的分布：

 align-items:stretch;拉伸默认，子元素不设置高度，会拉伸和父元素高度一样
 flex-start;靠近侧轴开端
 flex-end;靠近侧轴结束端
 center;居中
 baseline;

弹性元素是否换行

flex-wrap: no-wrap;默认不换行
wrap;换行
wrap-reverse;反序换行

侧轴上元素的对齐方式（设置换行后就要设置侧轴的多行分布情况）