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

强制 Flex 项目跨越整个行宽度

使用 Flex 布局时，通常需要系统地定位元素。在本例中，目标是将前两个子元素对齐在同一行，同时将下面的第三个元素以全宽放置。

使用 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中文网其他相关文章！