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;