最後の行のフレックスボックス項目を自然な幅に揃えるにはどうすればよいですか?

動的最終行アイテムのフレックスボックスを使用した適切な位置合わせの達成

このシナリオの目標は、最後の行アイテムのフレックス アイテムが確実に配置されるようにすることです。コンテナの行は、コンテナの利用可能なスペースを尊重しながら、コンテンツの幅に自然に揃えられます。これは、行全体を満たすようにフレックス項目を引き伸ばすというフレックスボックスの固有の動作と矛盾します。

フレックスボックスの位置調整を試行しています

表示: flex; でフレックスボックスを利用する最初の試み。および flex-wrap: ラップ;最後の行に到達するまではまともな結果が得られ、すべてのフレックス項目はコンテナーの幅に合わせて伸縮されます。この効果は、特に最後の行に 1 つまたは 2 つの項目だけが残っている場合には望ましくありません。

解決策: ファントム アイテムと Flex-Grow

解決策には、「ファントム」の導入が含まれます。 」 最後の行を継続的に占有する項目。基本的に、余分なスペースを埋め、残りの項目が過度に伸びるのを防ぐためのプレースホルダーとして機能します。このアプローチを実装するには:

1. コンテナ内の最後の実際のフレックス アイテムの後に、同じ寸法と可視性を持つ 3 ～ 4 個のファントム アイテムを追加します: 非表示。
2. または、単一のファントムを作成します。可視性を持つ項目: hidden および flex-grow: 10。これを具体的にターゲットにするには、:last-child または :last-of-type 疑似クラスを使用します。 element.

実際の実装

たとえば、ユーザー #82 がコンテナ内で最後に表示されるアイテムである場合:

• 可視性を持つファントム ユーザー #83、#84、および #85 を追加します。 hidden.
• または、可視性: hidden および flex-grow: 10 を指定して、:last-child としてターゲットを指定した単一のファントム項目を追加します。

Result

このアプローチにより、フレックス項目の最後の行がコンテンツの幅に自然に整列し、観察される過度の伸縮が解消されます。 以前。コンテナのスペースは、望ましい位置合わせ動作を犠牲にすることなく効果的に埋められます。

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