伸缩布局

之前常用的布局方式：
每种布局方式都有自己的布局特点，不同的布局方式相互独立，互不干扰
1-标准流
　块级——独占一行
　行内——没有宽高，由内容撑开，独占一行
　行内块——有宽高，不独占一行
　从上到下，从左到右
2-浮动
　左浮动
　右浮动
　清除浮动
3-定位
　参照：

1. 　绝对定位：有定位的父元素
2. 　相对定位：相对于自身的位置
3. 　固定定位：相对于浏览器窗口

　边偏移：left、top、bottom、right

4-伸缩布局 display:flex

1.主轴和侧轴始终相互垂直
2.内部元素的排列方向由主轴决定
3.主轴的方向(flex-direction)
　row 水平向右，默认
　

　row-reverse 从右向左
　

　column 从上往下
　

　column-reverse 从下往上
　

4.主轴对齐方式justify-content
　flex-start 起点对齐
　

　center 居中
　

　flex-end 终点对齐
　

　space-around 平分父盒子空间
　

　space-between 两端靠边，中间平分
　

5.侧轴对齐方式 align-items
　flex-start 起点对齐
　center 居中
　flex-end 终点对齐
　stretch 拉伸，在默认情况下，侧轴方向是被拉伸的，主轴方向不设置宽，宽为0 （高和父盒子一样，宽为0）
　
6.换行flex-wrap
    nowrap（默认）不换行
　

　

　wrap 换行

　
7.伸缩比例 flex:数值
　flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
　添加了flex属性的子元素，会按照比例自动分配空间，如果希望某个元素大小固定，其他元素自适应，则该元素不设置flex属性，其余元素设置flex属性即可
　
　1:2:1 显示效果