flexboxの親要素を可変の子要素に合わせるCSS

Flexboxで作成した場合、親要素は横幅100%となります。
子要素をinline表示とし、親要素幅を子要素に合わせたい場合のCSS設定をメモしておきます。

どんな状態か、デモをご確認ください。

デモ

子要素に合わせて親要素を横幅可変

See the Pen 親要素の横幅100％ by harumi-sato (@harumi-sato) on CodePen.

子要素に関係なく親要素を横幅100%固定

See the Pen 親要素の横幅、子要素のサイズに可変 by harumi-sato (@harumi-sato) on CodePen.

コード

Flexboxを囲ったblockに inline-blockを指定すると、
子要素がinline-blockの振る舞いとなります

HTML

<div class="parent">
<ul class="item_parent">
<li class="item_child _child1">category1</li>
<li class="item_child _child2">category2</li>
</ul>
</div>

CSS

.parent{
  display:inline-block;
}
.item_parent{
  display:flex;
  background:lightpink;
}
.item_child{
  background:#fff;
}

まとめ

親要素が可変する場合、1段上に幅指定用のブロックを作成する。