フレックス項目を他のフレックス項目の下の行の全幅に広げる方法は?

行内の全幅フレックス項目

3 番目の項目を下に配置しながら、最初の 2 つの子要素を 1 つの行に維持することを目的としています。これにはフレックスを使用し、全幅で表示しますlayout.

質問:

最初の 2 つのフレックス位置要素の下の行の幅全体に「label」要素を強制的に広げるにはどうすればよいですか?

答え:

フレックス項目を強制するには行全体にまたがり、幅: 100% またはフレックスベース: 100% を適用し、コンテナーでのラップを有効にします。これを実現するには、次の調整を行います。

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

.error {
  flex: 0 0 100%; /* flex-grow, flex-shrink, flex-basis */
  border: 1px dashed black;
}

これらの変更により、最初の 2 つの子要素の希望のフレックス位置を維持しながら、「label」要素が他の 2 つの要素の下の全幅を占めるようになります。

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