我试图将前两个子元素保留在同一行上,而第三个元素以全宽度保留在自己的下面,所有这些都使用flex。
我对在前两个元素上使用flex-grow和flex- shrink属性特别感兴趣(这是我不使用百分比的原因之一),但是第三个元素确实必须为全角且在前两个元素以下。
flex-grow
flex- shrink
当发生错误且无法更改代码时,以label编程方式将元素添加到text元素之后。
label
text
如何强制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%,然后wrap在容器上启用它。
width: 100%
flex-basis: 100%
wrap
现在,该物品会消耗所有可用空间。兄弟姐妹被迫移至其他行。
.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>