flex

单词

row 行，排；reverse 反向；column： 纵列；wrap：换行，包，缠绕；justify：对齐；content：内容；align:对齐；items：项目；stretch：伸展，延伸； shrink:收缩；

我们之前用什么布局

1. normal flow
2. float + clear
3. position relative + absolute
4. display:inline-block
5. 负margin

flex特点

1. 块级布局侧重垂直方向，行内布局侧重水平方向，flex布局与方向无关
2. flex布局可以实现空间自动分配，自动对齐（弹性，灵活）
3. flex布局适用于简单的线性布局，更复杂的布局使用grid

基本概念

注意：这里的主轴方向不确定，有可能是横向的也有可能是纵向的。row，column决定了他们的方向。

例子

这时候主轴变成了竖直的，所以还是在主轴上进行操作，所以还是使用justify-content

order和self

wrap

align-content

布局总结

支持IE8： Float布局＋定宽

支持移动端： Flex布局＋弹性宽度

原则：

1. 不到万不得已，不写死width和height
2. 尽量使用高级语法，例如calc，flex
3. 如果是IE，就全部写死。