如何讓 Flex 專案跨越其他 Flex 專案下方的整行？

強制全寬Flex 專案跨越整行

問題：

問題：

問題：

在flex 佈局，目的是將前兩個子元素保留在單行上，而第三個元素佔據自己的位置下面的全寬行。挑戰來自於希望對前兩個元素使用 flex-grow 和 flex-shrink 屬性，同時確保第三個元素拉伸到父容器的整個寬度並出現在前兩個元素的下方。
• 解：

強制第三個元素跨越100% 寬度並出現在另一個元素下方的新行上二：

在第三個元素上設定flex-basis: 100%。這確保它佔據其行中的所有可用空間並被推送到新行。

.parent {
  display: flex;
  flex-wrap: wrap;
}

#range, #text {
  flex: 1;
}

.error {
  flex: 0 0 100%; /* flex-grow, flex-shrink, flex-basis */
  border: 1px dashed black;
}

<div class="parent">
  <input type="range">

實作 flex-wrap: 在父容器上換行。這允許彈性項目包裹到多行，容納無法適應當前行寬度的項目。

範例程式碼：透過這種方法，前兩個元素佔據同一行，共享可用寬度，而第三個元素跨越父容器的整個寬度，並且位於下面的新行上。

以上是如何讓 Flex 專案跨越其他 Flex 專案下方的整行？的詳細內容。更多資訊請關注PHP中文網其他相關文章！