我试图创建一个随着视口变小而消失的边距，同时主要内容尽可能长时间地保持相同的大小。该边距应该有最大尺寸，因此使用auto是不可能的。
换句话说，我的问题是如何控制网站上不同项目的收缩优先级。
Flexbox 模型允许设置ratio收缩，但不是收缩的顺序。
我必须使用哪些选项（不使用 Javascript）来实现此目的？
Note: I'm answering my own question here but I'm also looking for better answers.
flex-shrink/flex-grow
一种方法是拥有一个 Flexbox 项目flex-shrink，并让另一个增长到它应该有的大小flex-grow。这样，后一个项目将首先“收缩”（减少其增长）。
通过嵌套此结构可以实现两层以上。
.flex-container {
display: flex;
}
.first-to-shrink {
flex-shrink: 0;
flex-grow: 1;
flex-basis: 0px;
min-width: 0px;
background: coral;
}
.second-to-shrink {
flex-shrink: 1;
flex-grow: 0;
background: cornflowerblue;
}
<div class="flex-container">
<div class="first-to-shrink flex-container">
<div class="first-to-shrink">
This is going to shrink first!
</div>
<div class="second-to-shrink">
And then this one is going to shrink!
</div>
</div>
<div class="second-to-shrink flex-container">
<div class="first-to-shrink">
This one is going next!
</div>
<div class="second-to-shrink">
This is the last one to disappear!
</div>
</div>
</div>
尺寸计算
另一种方法是计算每个项目的大小作为视口与在其之后应缩小的所有其他项目的大小之间的差异（这需要知道每个项目的大小），如下所示：
.shrinkable {
overflow: hidden;
max-height: 100px;
}
#first-to-shrink {
height: calc(100vh - 300px);
background: coral;
}
#second-to-shrink {
height: calc(100vh - 200px);
background: cornflowerblue;
}
#third-to-shrink {
height: calc(100vh - 100px);
background: coral;
}
#fourth-to-shrink {
height: 100vh;
background: cornflowerblue;
}
<div id="first-to-shrink" class="shrinkable">
This is going to shrink first!
</div>
<div id="second-to-shrink" class="shrinkable">
And then this one is going to shrink!
</div>
<div id="third-to-shrink" class="shrinkable">
This one is going next!
</div>
<div id="fourth-to-shrink" class="shrinkable">
This is the last one to disappear!
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
