我试图将前两个子元素保留在同一行,而第三个元素则在下面以全宽保留在自己的位置,所有这些都是在使用flex的情况下进行的.
我特别感兴趣的是在前两个元素上使用flex-grow
和flex-shrink
属性(这是我不使用百分比的原因之一),但是第三个元素必须是全宽度的,并且低于前两个.
当出现错误并且我不能更改代码时,label
元素以编程方式添加到text
元素之后.
如何强制标签元素在使用flex定位的其他两个元素下方跨越100%的宽度?
.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>