シュリンクラップフレックスボックスを使用してフレックスアイテムをラップし、中央に配置できるようにします。

Question

パックされたコンテンツを含むフレックスボックスがあります。フレックスボックスをその内容に合わせて縮小するにはどうすればよいですか?私が解決しようとしている根本的な問題は、フレックスボックスを中央に配置することです。この画像は私の問題を説明しています:

この目標を達成するにはどうすればよいですか?これは純粋な CSS で実現できますか? Flexbox が 1 列、2 列、または 3 列に折り返されるかどうかは、事前にはわかりません。要素の幅は既知です。高さは不明であることが望ましいですが、その方が簡単な場合は、一定の高さを決定することもできます。

は、width:min-content、width:max-content、width:fit-content、inline-flex## のいずれでもありません #問題は解決するようです。 < /code>

JS フィドル: https://jsfiddle.net/oznts5bv/


リーリー
リーリー

P粉070918777 · Answer

display:flex; と display:grid; を使用して、2 つの例が作成されました。 2 番目のオプションの方が適しているかもしれません:

リーリーリーリー