1、flex弹性流布局的用法
在父类中加上display:flex;
2、flex弹性流布局.container父级元素的属性
- 排列方向：
flex-direction:row（默认值，横向排列）| column| row-reverse| column-reverse - 自动换行：
flex-wrap:wrap| nowrap| wrap-reverse - 左右对齐方式：
justify-content:flex-start | flex-end | center | space-between | space-around | space-evenly - 垂直方向对齐：
align-items:center | flex-start | flex-end | stretch - 多行内容的排列分布方式：
align-content:flex-start | flex-end | center | stretch | space-between |space-around
3、.content子级元素的属性
- .item:first-child{}
- .item:nth-child(2){}
- .item:nth-child(3){}
- .item:last-child{}
4、控制item的顺序
order:-1|0|1|... ，按数字顺序对item进行排序，默认为0，数字越大，顺序越往后。
5、控制item变大
flex-grow:1|2|... 根据数字大小设定item的宽度，数字越大，对应的item的宽度越大，默认为0。
6、控制item变小
flex-shrink:1|2|... 根据数字大小设定，数字越大，当浏览器变窄时，对应的item缩小越多，默认为1，属性值为0时，不会再变窄。
7、其他
flex-basis:与width:属性的效果相同，但是很少使用。align-self定制化改变某个item的align-items
8、flex布局的常用属性
flex-wrap:wrapjustify-content:center ｜ space-betweenalign-items:center
9、注意
- 使用 负margin的方法
- flex布局下，vertical-align属性将失效
- 不要把width 和 height 写死，除非特殊说明
- 用
min-width ｜ max-width ｜ min-height ｜ max-height - 父元素：flex 和子元素：
margin-xxx:auto配合有意外的效果
