web-dev-qa-db-ja.com

フレックスアイテムを強制的に行全体に広げます

Flexを使用している間、最初の2つの子要素を同じ行に保持し、3番目の要素はそれ自体の下に全幅で配置しようとしています。

最初の2つの要素でflex-growプロパティとflex-shrinkプロパティを使用することに特に興味があります（これは、パーセンテージを使用しない理由の1つです）。二。

エラーが発生してコードを変更できない場合、label要素はプログラムでtext要素の後に追加されます。

Flexを使用して配置された他の2つの要素の下に、ラベル要素を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>
htmlcsscss3flexbox
35
MPaul

フレックスアイテムが行全体を占めるようにするには、width: 100%/flex-basis: 100%に設定し、コンテナでwrapを有効にします。

これで、アイテムは使用可能なすべてのスペースを消費します。兄弟は他の行に強制されます。

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

子では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>
4
Andrei Gheorghiu