フレックス項目を他のフレックス項目の下の行全体にまたがるようにする方法は?

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

問題:

フレックス レイアウトの目的は、最初の 2 つの子要素を 1 行に保持し、3 番目の要素を占有することです。その下に独自の全幅行が表示されます。この課題は、最初の 2 つの要素に対して flex-grow プロパティと flex-shrink プロパティを利用し、同時に 3 番目の要素が親コンテナの幅全体に伸びて最初の 2 つの要素の下に表示されるようにするという要望から生じます。

解決策:

3 番目の要素を強制的に幅 100% に広げ、他の要素の下の新しい行に表示するには2:

• 3 番目の要素に flex-basis: 100% を設定します。これにより、その行内のすべての利用可能なスペースが確実に占有され、新しい行にプッシュされます。
• 親コンテナーで flex-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">

このアプローチでは、最初の 2 つの要素が同じ行を占め、利用可能な幅を共有し、3 番目の要素は幅全体に広がります。親コンテナであり、下の新しい行に配置されます。

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