我的弹性盒子里有 2 件物品。当有足够的水平空间可用时,我希望右侧元素具有最大宽度,而左侧元素占据所有剩余空间。随着可用宽度的减少,我想缩小左侧元素,直到达到一定的宽度。然后,我想缩小右侧元素,直到达到某个最小宽度。此时,我想再次缩小左侧元素,直到它达到不同的最小宽度。之后,我希望元素换行,第一个元素占据其整行,第二个元素占据其最大宽度。
我将其称为收缩,因为这就是我的想法,但我认为我不能在这里使用 Flex-Shrink,因为 Flex 包装发生在 Flex 收缩之前。我几乎通过将每个元素的 flex-basis 设置为其最小宽度,将两个元素的 flex-grow 设置为 1,并在右侧元素上设置最大宽度来实现这一目标。然而,这使得两个元素随着可用空间的增加以相同的速度增长。我不希望右侧元素增长,直到左侧元素达到一定宽度。下面的代码片段展示了这一点。
虽然我希望有一个 CSS 解决方案,但我不一定依赖于 Flexbox。如果 CSS 网格或其他一些机制可以实现这一点,我当然对此持开放态度。
在下面的代码片段中,容器 div 上设置的宽度只是为了模拟它们可能的宽度。在实际代码中,这些宽度都将设置为
auto
,实际宽度将由浏览器的视口大小和页面上的其他动态元素决定。
div {
height: 175px;
}
.container {
background-color: grey;
display: flex;
flex-wrap: wrap;
width: 700px;
margin-bottom: 20px;
}
.high-width {
width: 600px;
}
.med-high-width {
width: 500px;
}
.med-low-width {
width: 450px;
}
.low-width {
width: 400px;
}
.content {
background-color: lightblue;
flex: 1 0 350px;
}
.sidebar {
background-color: lightgreen;
flex: 1 0 100px;
max-width: 200px;
}
.wrong {
background-color: red;
}
<div class="container">
<div class="content">This fills the remaining space (500px), which is what I want!</div>
<div class="sidebar">This is 200px wide, which is what I want!</div>
</div>
<div class="container high-width">
<div class="content">This is 425px wide but I want it it to be 450px (Once the content gets down to 450px wide, I want only the sidebar to start shrinking until it hits its min width)</div>
<div class="sidebar wrong">This is 175px wide but I want it to be 150px (Once the content gets down to 450px wide, I want only the sidebar to start shrinking until it hits its min width)</div>
</div>
<div class="container med-high-width">
<div class="content">This fills the remaining space, but that is 375px when I want it to be 400px (Once the sidebar is at its min-width, the content should start shrinking again)</div>
<div class="sidebar wrong">This is 125px wide but I want it to be 100px (Once the content gets down to 450px wide, I want the sidebar to start shrinking until it hits its min width)</div>
</div>
<div class="container med-low-width">
<div class="content">This fills the remaining space (350px), which is what I want!</div>
<div class="sidebar">This is 100px wide, which is what I want!</div>
</div>
<div class="container low-width">
<div class="content">This is on a row by itself, full width (400p), which is what I want!</div>
<div class="sidebar">This is on a row by itself and 200px wide, which is what I want!</div>
</div>
到处使用
min-width
属性而不是 width
。
房产
min-width
就能解决问题
div {
height: 175px;
}
.container {
background-color: grey;
display: flex;
flex-wrap: wrap;
width: 700px;
margin-bottom: 20px;
}
.high-width {
min-width: 600px;
}
.med-high-width {
min-width: 500px;
}
.med-low-width {
min-width: 450px;
}
.low-width {
min-width: 400px;
}
.content {
background-color: lightblue;
flex: 1 0 350px;
}
.sidebar {
background-color: lightgreen;
flex: 1 0 100px;
max-width: 200px;
}
.wrong {
background-color: red;
}
<div class="container">
<div class="content">This fills the remaining space (500px), which is what I want!</div>
<div class="sidebar">This is 200px wide, which is what I want!</div>
</div>
<div class="container high-width">
<div class="content">This is 425px wide but I want it it to be 450px (Once the content gets down to 450px wide, I want only the sidebar to start shrinking until it hits its min width)</div>
<div class="sidebar wrong">This is 175px wide but I want it to be 150px (Once the content gets down to 450px wide, I want only the sidebar to start shrinking until it hits its min width)</div>
</div>
<div class="container med-high-width">
<div class="content">This fills the remaining space, but that is 375px when I want it to be 400px (Once the sidebar is at its min-width, the content should start shrinking again)</div>
<div class="sidebar wrong">This is 125px wide but I want it to be 100px (Once the content gets down to 450px wide, I want the sidebar to start shrinking until it hits its min width)</div>
</div>
<div class="container med-low-width">
<div class="content">This fills the remaining space (350px), which is what I want!</div>
<div class="sidebar">This is 100px wide, which is what I want!</div>
</div>
<div class="container low-width">
<div class="content">This is on a row by itself, full width (400p), which is what I want!</div>
<div class="sidebar">This is on a row by itself and 200px wide, which is what I want!</div>
</div>