「justify-content: space-between」を使用してフレックスボックス グリッドの最後の行に均等な間隔を確保するにはどうすればよいですか?

フレックスボックス: グリッドの最後の行の位置合わせ

フレックスフロー: 行ラップを使用したフレックスボックス コンテナー内。 justify-content: space-between; を使用すると、最後の行項目が正しく配置されない可能性があります。この記事では、目的の間隔を維持しながら、最後の行を他の行と揃える簡単な解決策について説明します。

この解決策では、::after 疑似要素を利用して、コンテナ内の残りのスペースを自動入力します。 flex: auto; を割り当てることで、 ::after に追加すると、HTML 内の余分なコンテンツを含まずに空いたスペースが埋められます。 > justify-content: space-between;

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

このアプローチは、HTML コードに不要な要素を追加する必要性を回避する、クリーンで簡単なソリューションを提供します。 。 http://codepen.io/DanAndreasson/pen/ZQXLXj でライブ デモをチェックして、その有効性を確認してください。

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