全部 / 前端 / 技术 · 2022年4月13日 0

CSS 中的 flex

CSS 中的 display:flex 确实给开发者提供了很大的便利,但有时候写起来可能也不是那么容易。

固定宽度

.item{
    flex:0 0 100px;
}

flex 是:flex-grow、flex-shrink、flex-basis 的缩写,上面的代码等价于:

.item{
    flex-grow:0;
    flex-shrink:0;
    flex-basis:100px;
}

首先说下 flex 是对于容器可用空间的分配策略,所以上面的代码就是:既不缩小,也不扩大,初始值100px。

应用场景

  1. 两边固定宽度,中间自适应
<div class="content">
    <div class="item-left"></div>
    <div class="item-center"></div>
    <div class="item-right"></div>
</div>

.content {
    display: flex;
    align-items: center;
    .item-left {
        flex: 0 0 94px;//不放大 不缩小 固定宽度94px
    }
    .item-center {
        flex: 1 1 auto;//可放大 可缩小
    }
    .item-right {
        flex: 0 0 16px;//不放大 不缩小 固定宽度94px
    }
}

例子:https://jsbin.com/lukayoc/edit?html,css,output