伸縮せずに最後の行でフレックス項目の幅を調整するにはどうすればよいですか?

最後の行でのフレックス項目の幅の調整

最後の行を除き、コンテナ全体に要素を均等に分散しようとすると課題が発生します。要素間にスペースがないため、text-align: justify を使用して要素を整列させるだけでは十分ではありません。 Flexbox は解決策を提供しますが、デフォルトの動作では最後の行の要素が幅全体に引き伸ばされます。

要素が最後の行で自然な幅を使用する、justify-align のような動作を実現するには、次のアプローチを使用します。

1. ファントム アイテムの追加:
   いくつかの「ファントム」アイテムを作成します。コンテナの最後のスロットを占有します。これらの項目は、可視性: hidden で非表示にできます。

たとえば、ユーザー #82 を最後のエントリとして、偽のユーザー 83、84、および 85 を可視性: hidden で追加します。

2. 唯一のファントム アイテムを使用します:
   または、単一のファントムを使用します可視性: hidden および flex-grow: 10 の末尾の項目。:last-child または :last-of-type 疑似クラスを使用してターゲットにします。

このメソッドでは、最後の行の要素が許可されます。自然な幅を維持しながら、残りのスペースをファントム アイテム全体に均等に分配します。

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