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


75

我试图将前两个子元素保留在同一行中,而第三个元素以全宽度保留在自己的下面,所有这些都使用flex。

我对在前两个元素上使用flex-growflex-shrink属性特别感兴趣(这是我不使用百分比的原因之一),但是第三个元素确实必须为全角且在前两个元素以下。

当发生错误且无法更改代码时,以label编程方式将元素添加到text元素之后。

如何强制label元素在使用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>

Answers:


120

当您希望弹性项目占据整行时,将其设置为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


1
“并启用wrap容器。” <-那是我所缺少的。为什么我们需要that‽
费尔南多·巴索

因为flex-wrap: nowrap是flex容器中的默认设置。@FernandoBasso
Michael Benjamin

我明白了,谢谢。我正在处理的东西在flex容器中只有一个flex项,并且设置了width: 100%flex-basis: 100%不够,并且仅当我设置wrap为flex容器时才起作用。只是尝试了一个简单的示例,flex子项的宽度变为100%,而没有 wrap容器。那时我的情况一定有其他事情发生。
Fernando Basso

如果您不希望组件进行包装而是溢出和滚动,并且仍然是父级宽度的100%,该怎么办?.col .wrapper {display:flex; flex-direction:行;宽度:???; 溢出-x:自动; }
Dane411

10

您似乎在寻找min-width孩子和flex-wrap:wrap父母:

.parent {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
}

.parent > * {
  flex-grow: 1;
}

.parent > .error {
  min-width: 100%;
  background-color: rgba(255,0,0,.3);
}
<div class="parent">
  <input type="range" id="range">
  <input type="text" id="text">
  <label class="error">Error message</label>
</div>

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.