「justify-content: space-between;」を使用してフレックスボックス内の項目の最後の行を揃えるにはどうすればよいですか?

フレックスボックスを使用した最終行項目の配置

フレックスボックス レイアウトは、コンテンツを柔軟に配置できることで知られています。フレックスフローを使用して配置された項目を含むフレックスボックスコンテナがあるシナリオでは、行のラップ; justify-content: space-between; と justify-content: space-between; を使用すると、最後の行の項目を他の項目と揃えたい場合があります。

justify-content: space-between で整列を実現する;

justify-content: space-between; の使用を維持しながらこの配置を実現するには、次のようにします。グリッドの寸法を調整するには、次のメソッドを利用できます:

 display: flex;<br> flex-flow: row Wrap;<br> justify-content: space-between;<br> }<p>.grid::after {<br> content: "";<br> flex: auto;<br>}<br></p>

この CSS コードは、コンテナに非表示の要素 (::after) を追加します。この要素はコンテナ内の残りのスペースを占有し、他の行の望ましい分布を維持しながら、最後の行の項目を他の項目と効果的に配置します。

例

最後の行項目を「中央の列」に揃える必要がある次の例を考えてみましょう:

表示: flex;<br> flex-flow: 行のラップ;<br> justify-content: space-between;<br>}<p>.grid::after {<br> content: "";<br> flex: auto;<br>}</p><p>.item {<br> width: 100px;<br> 高さ: 100px;<br> 背景色: #ccc;<br>}<br></p>

このコードは、複数のアイテムにラップされたフレックスボックス コンテナを作成します。行。 ::after 要素は、最後の行項目が他の行項目と整列することを保証し、コンテナーの幅が変化しても他の行の分散を維持します。

以上が「justify-content: space-between;」を使用してフレックスボックス内の項目の最後の行を揃えるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。