html - 当窗口调整大小时，在另外两个 div 之间挤压一个 div

Question

我有以下代码:

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 来做到这一点？

Answer 1

使用 flex 布局。

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

演示 fiddle :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>