当前标签 / flex / 总共1篇

CSS flexbox弹性布局

初识flex

之前我们写布局都是基于浏览器的盒模型,通过浮动的方式来排列界面的,这种方式有很多浏览器的 bug 和困扰我们的问题, 而 flexbox 的出现彻底解决了这些之前被人们诟病的问题。

flexbox 是基于两个坐标轴来实现的, 类似于 Android 中的线性布局 LinearLayout, 如果我们要使一个容器成为 flexbox 就需要设置 display: flex;

flex 容器内部的元素称为 flex item, 水平轴称为 main axis, 竖直轴称为 cross axis, 大致布局如下:

基本使用

我们先来定义一个 flexbox 容器, 在里面放几个 flexitem:

<body>
    <div class="flexbox">
        <div class="flexitem">我是 DIV 标签内容</div>
        <p class="flexitem">我是 P 标签内容</p>
        <span class="flexitem">我是 SPAN 标签内容</p>
    </div>
</body>
.flexbox{
    width: 600px;
    height: 200px;
    margin: 50px auto;
    background: bisque;
}

.flexitem{
    background:brown;
    color:white;
}

阅读更多