强制弹性项目跨越整个行宽度

Question

我试图将前 2 个子元素保留在同一行，而第三个元素则在其自己的下方以全宽显示，同时使用 Flex。

我对在前 2 个元素上使用

flex-grow

和

flex-shrink

属性特别感兴趣（这是我不使用百分比的原因之一），但是第三个元素确实必须是全宽且位于前两个元素下方。

当出现错误并且我无法更改代码时，会以编程方式在

label

元素之后添加

text

元素。

如何强制标签元素跨越使用 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>

Answer 1

当您希望 Flex 项目占据整行时，请将其设置为

width: 100%

或

flex-basis: 100%

，并在容器上启用

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" id="range">
  <input type="text" id="text">
  <label class="error">Error message (takes full width)</label>
</div>

更多信息：

flex-wrap

属性的初始值为

nowrap

，这意味着所有项目将排成一行。 MDN

Answer 2

要看是不是

1. Flex-direction:row（默认为行）/在父容器上

• 尝试在您想要全宽度的孩子上使用 justify-self:stretch /

2. Flex-direction-column / 在父容器上 -尝试在您想要全宽度的孩子上使用align-self：拉伸/

希望在某些情况下能帮助别人，通常对我有帮助

Answer 3

我通过设置最后一个元素属性来实现它

flex-grow: 1

。