Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
4
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

Organization

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の振る舞いとなります:thumbsup:

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段上に幅指定用のブロックを作成する。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
4
Help us understand the problem. What are the problem?