CSS flexbox弹性布局

2019-07-26 · 大约 500 个字 · 预计 3 分钟读完

Web前端 · CSS

Web前端 · CSS · flex · flexbox

初识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;
}