Flexbox はどのようにして最終行の可変幅要素の両端揃えを実現できますか?

フレックスボックスのマスター: 可変幅要素の正当な配置を実現する

Web デザインの領域では、多くの場合、要素を一定の位置に配置することが望ましいです。スペースを最適化し、視覚的に楽しいレイアウトを作成する方法。 Flexbox は、この目的を達成するための強力なツールとして登場しましたが、特定のシナリオでは特有の課題が生じる可能性があります。

そのような課題の 1 つは、フレキシブル コンテナー内に配置された可変幅アイテムを扱うときに発生します。ユーザーのリストを考えてみましょう。各ユーザーには名前とそれに関連付けられた番号が付いています。フレックスボックスを使用してラップすると、これらの要素がコンテナの幅全体に広がる可能性があり、最後の行に見苦しい隙間ができてしまいます。

望ましい動作は、自然な幅を使用して要素を最後の行に揃えることです。他のすべての行の要素がコンテナの幅を完全に活用するようにします。これを達成するには、ファントム アイテムを使用するテクニックを使用できます。

解決策: ファントム アイテム

この配置の問題を解決する鍵は、最終行の最後のスロット。これらの項目は、visibility: hidden を使用して非表示にレンダリングされますが、flex-grow プロパティによって行の残りのスペースが確実に埋められます。

実装

このソリューションを実装するには、コンテナの最後にファントム アイテムを追加できます。たとえば、82 人のユーザーのリストを考慮すると、次の CSS を使用して 3 つのファントム アイテムを作成できます:

.userlist:after {
    content: "";
    flex: 10 0 auto;
    visibility: hidden;
}

別のアプローチには、flex-grow: 10 で 1 つのファントム アイテムを作成し、次を使用してターゲットを設定することが含まれます。 last-child または :last-of-type 疑似クラス。

以上がFlexbox はどのようにして最終行の可変幅要素の両端揃えを実現できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。