フレックス項目を他のフレックス項目の下の行幅全体に広げるにはどうすればよいですか?

フレックス項目を全行幅に強制する

フレックス レイアウトを使用する場合、多くの場合、要素を体系的に配置する必要があります。この場合の目標は、最初の 2 つの子要素を同じ行に配置し、その下に 3 番目の要素を全幅で配置することです。

フレックス プロパティを使用した解決策

これを実現するには、最初の 2 つの要素の次のプロパティ:

flex-grow: 1;
flex-shrink: 1;

これは、使用可能なスペースを満たすために拡大および縮小することを意味します。

3 番目の要素には、次のプロパティを使用します。

flex-grow: 0;
flex-shrink: 0;
flex-basis: 100%;

これにより、元のサイズが維持され、縮小せず、コンテナーが存在するときにコンテナーの全幅を占めることが保証されます。

動的に追加された要素の組み込み

ラベル要素はプログラムで追加されるため、それに合わせて CSS を調整することが重要です。ラベル要素に次のプロパティを設定すると、最初の 2 つの要素の下の全幅に広がります:

display: block;
width: 100%;

最終コード スニペット

これらのソリューションを組み込んだ例を次に示します:

<div class="parent">
  <input type="range">

.parent {
  display: flex;
  flex-wrap: wrap;
}

#range, #text {
  flex: 1;
}

.error {
  flex: 0 0 100%;
  border: 1px dashed black;
}

これにより、ラベル要素が最初の 2 つの要素の下に 100% 幅に広がるように強制され、目的の値が維持されます。レイアウト。

以上がフレックス項目を他のフレックス項目の下の行幅全体に広げるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。