我試圖將前兩個子元素保留在同一行中，而第三個元素以全寬度保留在自己的下面，所有這些都使用flex。我對在前兩個元素上使用flex-grow和flex-shrink屬性特別感興趣（這是我不使用百分比的原因之一），但是第三個元素確實必須為全角且在前兩個元素以下。當發生錯誤并且我無法更改代碼時，以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>
2 回答
眼眸繁星
TA貢獻1873條經驗 獲得超9個贊
每當您希望彈性項目占據整個行時，請將其設置為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>
瀟瀟雨雨
TA貢獻1833條經驗 獲得超4個贊
您似乎在尋找min-width孩子和flex-wrap:wrap父母：
.parent {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.parent > * {
flex-grow: 1;
}
.parent > .error {
min-width: 100%;
background-color: rgba(255,0,0,.3);
}
<div class="parent">
<input type="range" id="range">
<input type="text" id="text">
<label class="error">Error message</label>
</div>
- 2 回答
- 0 關注
- 605 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消