1 传统布局与flex布局
传统布局（以之前所学的PC端布局为例）
- 兼容性好
- 布局繁琐
- 局限性，不可以在移动端很好的布局
flex弹性布局 - 操作方便简单，移动端应用广泛
- PC端浏览器支持情况较差
- IE11或更低版本，不支持或仅部分支持
建议 - 如果是PC端页面布局，采用传统布局
- 如果是移动端或者不考虑兼容性问题的PC端布局，采用flex弹性布局
2 布局原理
flex用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。
- 当为父盒子设置为flex布局之后，子元素的float、clear、vertical-align属性将失效。（不需要浮动、清除浮动、盒子垂直居中，因为flex都可以代替这些功能）
- 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
采用flex布局的元素称为flex容器，简称容器。它所有子元素自动成为容器成员，称为flex项目，简称项目。
- 体验中div就是flex父容器
- 体验中span就是子容器flex项目
- 子容器可以横向排列也可以纵向排列
总结flex布局原理：
就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。
3 父项常见属性
3.1 flex-direction设置主轴的方向
flex-direction属性决定主轴的方向（即项目的排列方向）
注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴，我们的子元素是根据主轴来排列的。
flex-direction的属性值：
- row(默认值从左到右)
- row-reverse(从右到左)
- column(从上到下)
- column-reverse(从下到上)
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body><style>
div {
/* 给父亲添加flex属性 */
display: flex;
/* 添加flex之后，行内元素也有宽高；*/
width: 500px;
height: 200px;
background-color: pink;
/* 默认沿着x轴排列 */
/* flex-direction: row; 默认值 */
flex-direction: row-reverse;
/* flex-direction: column; */
/* flex-direction: column-reverse; */
}
div span {
width: 100px;
height: 50px;
background-color: skyblue;
margin: 2px 10px;
}
</style>flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
