html – 使flex项目在一行上占据整个宽度

我试图在同一行保留前两个子元素,而第三个元素在全宽度下面保持自己,同时使用flex.

我特别感兴趣的是在前2个元素上使用flex-grow和flex-shrink属性(这是我不使用百分比的原因之一)但是第三个元素必须是全宽并且低于前两个元素.

当出现错误时,在文本元素之后以编程方式添加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>

解决方法

只要您希望弹性项占据整行,请将其设置为width：100％/ flex-basis：100％,并启用容器上的换行.

该项目现在消耗所有可用空间.兄弟姐妹被迫进入其他行.

.parent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background-color: #ececec;
}

.error {
  flex: 0 0 100%; /* fg: 0,fs: 0,fb: 100% */
  border: 1px dashed red;
}

#range,#text {
  flex: 1;
}

<div class="parent">
  <input type="range" id="range">
  <input type="text" id="text">
  <label class="error">Error message</label>
</div>

原文地址：https://www.jb51.cc/html/226594.html