如何使 Flex 项目跨越其他 Flex 项目下方的整行？-css教程-PHP中文网

如何使 Flex 项目跨越其他 Flex 项目下方的整行？

Susan Sarandon

发布： 2024-12-11 03:32:10

原创

401 人浏览过

How to Make a Flex Item Span the Entire Row Below Other Flex Items?

强制全宽 Flex 项目跨越整行

问题：

在flex 布局，目的是将前两个子元素保留在单行上，而第三个元素占据自己的位置下面的全宽行。挑战来自于希望对前两个元素使用 flex-grow 和 flex-shrink 属性，同时确保第三个元素拉伸到父容器的整个宽度并出现在前两个元素的下方。

解决方案：

强制第三个元素跨越 100% 宽度并出现在另一个元素下方的新行上二：

在第三个元素上设置 flex-basis: 100%。这确保它占据其行中的所有可用空间并被推送到新行。
实现 flex-wrap: 在父容器上换行。这允许弹性项目包裹到多行，容纳无法适应当前行宽度的项目。

示例代码：

.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 项目跨越其他 Flex 项目下方的整行？的详细内容。更多信息请关注PHP中文网其他相关文章！