强制弹性项跨越整行宽度

我试图保留同一行的前两个子元素，而第三个元素在下面的全宽位置，同时使用 flex。

我特别感兴趣的是在前2个元素上使用 flex-grow和 flex-shrink属性(这是我不使用百分比的原因之一) ，但是第三个元素实际上必须是全宽并且低于前两个元素。

当出现错误且无法更改代码时，以编程方式将 label元素添加到 text元素之后。

我如何强制标签元素跨越100% 的宽度低于其他两个元素的位置使用 Flex？

.parent {
display: flex;
align-items: center;
width: 100%;
background-color: #ececec;
}


.parent * {
width: 100%;
}


.parent #text {
min-width: 75px;
flex-shrink: 2.25;
}

<div class="parent">
<input type="range" id="range">
<input type="text" id="text">
<label class="error">Error message</label>
</div>

211675

小开

最佳答案

当您希望一个 flex 项占据整个行时，将其设置为 width: 100%或 flex-basis: 100%，并在容器上启用 wrap。

该项目现在消耗所有可用空间。兄弟姐妹被强制到其他行。

.parent {
display: flex;
flex-wrap: wrap;
}


#range, #text {
flex: 1;
}


.error {
flex: 0 0 100%; /* flex-grow, flex-shrink, flex-basis */
border: 1px dashed black;
}

<div class="parent">
<input type="range" id="range">
<input type="text" id="text">
<label class="error">Error message (takes full width)</label>
</div>

更多信息: flex-wrap属性的初始值是 nowrap，这意味着所有项目将排成一行。< a href = “ https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wra”rel = “ norefrer”> MDN