flex弹性布局与传统布局的区别
- 传统布局
优点：兼容性好
缺点：繁琐 - flex弹性布局
优点： 简单
缺点：兼容性不好
设置属性的时候主要分为父元素设置和对子元素设置两种方式
父项
1 flex-direction设置主轴方向
row从左向右
row-reverse从右向左
column从上向下
column-reverse从下向上
2 justify-content 设置主轴上的子元素排列方式
flex-start;默认值从左往右
flex-start;默认值从右往左
space-around平分父元素的空间
space-between先放到两边，再平分剩余空间
3 flew-wrap 不能自动换行一定要加flex-wrap
wrap换行
nowrap不换行 默认不换行
4 align-items 设置侧轴上的子元素排列方式(单行)
flex-start 上对齐
flex-end 下对齐
center 居中
stretch 设置子项元素高度平分父元素高度（当子元素设置高度的时候没有效果）
5 align-content 设置侧轴上的子元素的排列方式（多行）
flex-start 从头部开始
flex-end 从尾部开始
center 从中间开始
space-between 先设置两头，然后将剩余位置平分显示
space-around 平分剩余空间
stretch 平分父元素的高度，当设置高度的时候，没有效果
6 复合属性flex-flow 同时设置flex-direction 和 flex-wrap
子项
1 align-self 控制子项自己在侧轴上的排列方式
flex-start 从头部开始
flex-end 从尾部开始
center 从中间开始
stretch 拉升
注意：align-self的优先级比align-items,align-content高子项还可以作为父项设置居中
2 order 设置子项之间的排列顺序
默认值是0
谁的order值越小，谁越靠前
3 flex 设置子项宽度占父元素宽度的比例 flex:1
注意：
当子项指定了width时无效
每个子项均分父元素的宽度
小结
1 父项添加了display:flex不会对布局有影响
2 默认宽度由内容撑开，高度和父项一样
3 子项添加浮动没有效果
4 加定位有效果，一般不用
5 子项可以直接添加宽度和高度
6 子项也可以作为父项
