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

问题描述：

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

I'm trying to retain the first 2 child elements on the same row while the third element is in its own below at full width, all while using flex.

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

I'm particularly interested in using the flex-grow and flex-shrink properties on the first 2 elements (which is one of my reasons for not using percentages) however the third element really must be full width and below the first two.

当出现错误并且我无法更改代码时，以编程方式将label元素添加到text元素之后.

The label element is added programmatically after the text element when there's an error and I can't change the code.

如何强制label元素在使用flex定位的其他两个元素下方跨越100％的宽度?

How do I force the label element to span a 100% width below the other two elements which are positioned using flex?

.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%，然后在容器上启用wrap.

When you want a flex item to occupy an entire row, set it to width: 100% or flex-basis: 100%, and enable wrap on the container.

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

The item now consumes all available space. Siblings are forced on to other rows.

.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>

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

相关推荐