调整窗口大小时，在其他两个div之间挤压一个div

debugcn 发表于 Dev

古斯塔沃·安加尔滕（Gustavo Amgarten）

我有以下代码：

HTML：

<div class="main">
    <div class="myClass1">
    </div>
    <div class="myClass2">
    </div>
    <div class="myClass3">
    </div>
    <div class="myClass4">
    </div>
</div>

CSS：

.main {
    width:100%;
    height:100px;
    background-color:#000;
}

.myClass1 {
    height: 100px;
    width:200px;
    background-color: blue;
    display: inline-block;
}

.myClass2 {
    height: 100px;
    width:200px;
    background-color: yellow;
    display: inline-block;
}

.myClass3 {
    height: 100px;
    width:200px;
    background-color: red;
    display: inline-block;
}

.myClass4 {
    height: 100px;
    width:200px;
    background-color: yellow;
    display: inline-block;
}

JSFiddle：http : //jsfiddle.net/a2whdvmw/

我想他们都对齐的权利main，但我调整窗口的大小，在某些时候myClass1会到达的左边缘main，我想myClass3之间挤myClass2，并myClass4从该点。

myClass1，myClass2并且myClass4大小均固定。因此，当我调整窗口大小时，唯一要更改的宽度是之一myClass3。

是否可以仅使用CSS做到这一点？

Abhitalks

使用弹性版面。

flex: 0 1 200px为您指定.myClass3。这将导致它不增长，但仍允许从flex-basis宽度收缩200px。对于其余部分，请指定aflex: 0 0 200px不允许同时进行扩展和收缩200px，随着.myClass3收缩随可用空间的减少而有效地将其固定在。

演示小提琴：http : //jsfiddle.net/abhitalks/a2whdvmw/1/

演示代码段：

.main { width:100%; height:100px; background-color:#000; display: flex;}

.myClass1 {
    flex: 0 0 200px;
    height: 100px; background-color: blue;
}

.myClass2 {
    flex: 0 0 200px;
    height: 100px; background-color: yellow;
}

.myClass3 {
    flex: 0 1 200px;
    height: 100px; background-color: red;
}

.myClass4 {
    flex: 0 0 200px;
    height: 100px; background-color: yellow;
}

<div class="main">
    <div class="myClass1"></div>
    <div class="myClass2"></div>
    <div class="myClass3"></div>
    <div class="myClass4"></div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。