使用 Flex 版面時，通常需要有系統地定位元素。在本例中，目標是將前兩個子元素對齊在同一行，同時將下面的第三個元素以全寬放置。
要實現此目的，請設定前兩個元素具有以下屬性：
flex-grow: 1; flex-shrink: 1;
這意味著它們將擴展和收縮以均勻地填滿可用空間。
對於第三個元素，使用以下屬性：
flex-grow: 0; flex-shrink: 0; flex-basis: 100%;
這可以確保它保持原始大小，不會縮小，並且在有足夠空間時佔據容器的整個寬度。
由於標籤元素是透過程式設計方式添加的，因此調整 CSS 以適應它至關重要。透過在標籤元素上設定以下屬性，它將跨越前兩個元素下方的整個寬度：
display: block; width: 100%;
以下是包含這些解決方案的範例：
<div class="parent"> <input type="range">
.parent {
display: flex;
flex-wrap: wrap;
}
#range, #text {
flex: 1;
}
.error {
flex: 0 0 100%;
border: 1px dashed black;
}這應該強制標籤元素在前兩個元素下方跨越100% 寬度，保持所需的寬度佈局。
以上是如何讓 Flex 專案跨越其他 Flex 專案下方的整個行寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
