フレックスdivの幅をコンテンツに合わせるにはどうすればよいですか？

フレックスdivの幅をコンテンツに合わせる方法

CSSのフレックスボックスレイアウトでは、display: flex を指定したdivはデフォルトで親要素の幅いっぱいに広がります。しかし、display: inline-flex を使用することで、divの幅をコンテンツのサイズに自動的に合わせることができます。

実装例

#box {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 200px;
    padding: 10px;
    margin: 20px;
    background-color: blue;
}

各プロパティの解説

上記コードで使われている主なプロパティの役割は以下のとおりです。

• display: inline-flex：要素をインラインレベルのフレックスコンテナにします。ブロック要素のように幅いっぱいに広がらず、コンテンツの幅に収まります。
• flex-direction: row：子要素を横方向（左から右）に並べます。
• flex-wrap: wrap：子要素がコンテナの幅を超えた場合に、自動的に折り返して表示します。
• max-width: 200px：コンテナの最大幅を200pxに制限し、それ以上広がらないようにします。

代替方法

display: flex のまま幅をコンテンツに合わせたい場合は、親要素や対象の要素に width: fit-content を指定する方法もあります。用途に応じて使い分けるとよいでしょう。