传统布局与flex布局的区别
| 传统布局 | flex弹性布局 |
|---|---|
| 兼容性好 | 操作方便,布局极为简单,移动端应用很广泛 |
| 布局繁琐 | PC端浏览器支持情况较差 |
| 局限性,不能在移动端很好的布局 | IE 11 或更低版本,不支持或仅部分支持 |
建议:
1、如果是PC端页面布局,还是用传统布局
2、如果是移动端或者不考虑兼容性问题的PC端页面布局,我们还是使用flex弹性布局
一、体验 flex 布局
注意:
- 使用 flex 布局，首先要给父级添加 flex 属性
- 语法：
display：flex； - 行内元素也可用 flex 布局，不需要转换也可设置宽度高度
代码如下（示例）：
<style>
div {
display: flex; //给父级添加flex属性
width: 500px;
height: 300px;
background-color: skyblue;
}
span {
width: 100px;
height: 100px;
margin: 10px;
background-color: pink;
}
</style>
<body>
<div>
<span></span>
<span></span>
<span></span>
</div>
</body>
效果如下（示例）：
二、flex 布局父项常见元素
1.flex-direction 设置主轴的方向
在flex布局中,是分为主轴和侧轴两个方向,同样的叫法有:行和列、x 轴和 y 轴
- 默认主轴的方向就是x轴方向,水平向右
- 默认侧轴的方向就是y轴方向,水平向下
注意:主轴和侧轴是会变化的,就看flex-direction设置谁为主轴,剩下的就是侧轴,而我们的子元素是跟着主轴来排列的
| 属性值 | 说明 |
|---|---|
| row | 默认从左到右 |
| row-reverse | 从右到左 |
| column | 从上到下 |
| column-reverse | 从下到上 |
代码如下（示例）：
<style>
div {
display: flex;
flex-direction: column; //设置主轴的方向
width
最低0.47元/天 解锁文章
2624
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
