フレックスボックス グリッド レイアウトで最後の行の要素を配置するにはどうすればよいですか?

フレックスボックス: グリッド レイアウトの最終行要素の位置合わせ

行に配置されラップされたコンテナを含むフレックスボックス レイアウトを設計する場合、最終行の要素を次のように位置合わせします。前の行にあるものは問題を引き起こす可能性があります。垂直方向の配置を確保しながら要素間の望ましい間隔を維持するには、次の解決策を使用できます。

コンテナ内に ::after 疑似要素を定義する新しい CSS ルールを作成します:

.grid::after {
  content: "";
  flex: auto;
}

この疑似要素はプレースホルダーとして機能し、コンテナー内の残りのスペースを消費します。 flex プロパティを auto に設定すると、利用可能な水平方向のスペースが自動的に埋められ、最後の行の要素が他の行の要素と効果的に配置されます。

コンテナ要素の CSS 定義内にこの新しいルールを忘れずに含めてください。目的のレイアウトに適用されていることを確認します。

以上がフレックスボックス グリッド レイアウトで最後の行の要素を配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。