予測できない幅を持つ最後の行にフレックス項目を完全に配置するにはどうすればよいですか?

最終行の Flex アイテムのサイズを調整して位置合わせする方法

Flex アイテムのリストを操作する場合、特に右端の位置合わせで不一致が発生することがあります。項目の幅が予測不可能または動的である場合。固定幅または display:table 手法では満足のいく結果が得られない可能性がありますが、正確なサイズと配置の制御にはフレックスボックスを使用した次のアプローチを検討してください:

Flexbox を使用した解決策:

1. 表示する親コンテナを設定します: flex;および flex-wrap: ラップ;複数の行を許可します。
2. フレックスを適用: 1 0 auto;

ただし、これによって最後の行の幅が広すぎる場合は、次の回避策を実装できます:

ファントム アイテムのトリック:

justify-align のような動作を実現するには、常に「ファントム」フレックス アイテムを作成することを検討してください。最後のスロットを占有します。これは、次のコードを親コンテナに追加することで実行できます:

.parent-container:after {
    content: '';
    flex: 10 0 auto;
}

このファントム アイテムは、最後の行の残りのスペースを埋めるように幅を自動的に調整し、真のフレックス アイテムが自然な状態を維持するようにします。 widths.

実装例:

指定された例では、次のように実装できます。解決策は次のとおりです。

.userlist {
    display: flex;
    flex-wrap: wrap;
}

.userlist:after {
    content: '';
    flex: 10 0 auto;
}

これにより、.userlist コンテナの最後のスロットを常に占有する単一のファントム アイテムが作成され、希望の間隔と配置が得られます。

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