CSS flexbox弹性布局
·
大约 500 个字
·
预计 3
分钟 读完
初识flex
之前我们写布局都是基于浏览器的盒模型,通过浮动的方式来排列界面的,这种方式有很多浏览器的 bug 和困扰我们的问题, 而 flexbox 的出现彻底解决了这些之前被人们诟病的问题。
flexbox 是基于两个坐标轴来实现的, 类似于 Android 中的线性布局 LinearLayout, 如果我们要使一个容器成为 flexbox 就需要设置 display: flex;
。
flex 容器内部的元素称为 flex item, 水平轴称为 main axis, 竖直轴称为 cross axis, 大致布局如下:
基本使用
我们先来定义一个 flexbox 容器, 在里面放几个 flexitem:
1
2
3
4
5
6
7
| <body>
<div class="flexbox">
<div class="flexitem">我是 DIV 标签内容</div>
<p class="flexitem">我是 P 标签内容</p>
<span class="flexitem">我是 SPAN 标签内容</p>
</div>
</body>
|
1
2
3
4
5
6
7
8
9
10
11
| .flexbox{
width: 600px;
height: 200px;
margin: 50px auto;
background: bisque;
}
.flexitem{
background:brown;
color:white;
}
|
阅读更多