我试图在同一行保留前两个子元素,而第三个元素在全宽度下面保持自己,同时使用flex.
我特别感兴趣的是在前2个元素上使用flex-grow和flex-shrink属性(这是我不使用百分比的原因之一)但是第三个元素必须是全宽并且低于前两个元素.
当出现错误时,在文本元素之后以编程方式添加label元素,并且我无法更改代码.
如何强制标签元素在使用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>
解决方法
只要您希望弹性项占据整行,请将其设置为width：100％/ flex-basis：100％,并启用容器上的换行.
该项目现在消耗所有可用空间.兄弟姐妹被迫进入其他行.
.parent {
display: flex;
flex-wrap: wrap;
align-items: center;
background-color: #ececec;
}
.error {
flex: 0 0 100%; /* fg: 0,fs: 0,fb: 100% */
border: 1px dashed red;
}
#range,#text {
flex: 1;
}
<div class="parent"> <input type="range" id="range"> <input type="text" id="text"> <label class="error">Error message</label> </div>
