フレックス項目を新しい行の全幅に占めるようにするにはどうすればよいですか?

特定の項目のフレックス行全幅

「label」要素が他の 2 つのフレックスの下の全幅を強制的に占めるようにすることを目的としています。配置された要素。これを実現する方法は次のとおりです:

通常、フレックス項目は利用可能なスペースを均等に共有します。ただし、1 つの項目 (ラベル) が新しい行の残りのスペース全体を占めるようにしたいとします。これを行うには:

1. 項目の幅を 100% に設定します: ラベル要素に幅 100% を割り当てるか、flex-basis: 100% を使用します。これにより、残りの水平方向のスペースがすべて確実に消費されます。
2. コンテナのラップを有効にする: 親コンテナを調整してラッピング (flex-wrap: Wrap) を有効にします。これにより、スペースがなくなると、兄弟要素が新しい行に強制的に流れます。

更新されたコードは次のとおりです:

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

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

これらの調整により、ラベル要素は、ラベル要素の幅全体に広がります。必要に応じて、他の 2 つのフレックス項目の下の行。

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