[CSS] Flexboxのサイズをコントロールする方法

ホームページを制作する時に、何かと使い倒すFlexbox。 たまにうまく扱えなくなることがあり、調べてみると以前にも支えていたということを思い出す。 こうした時間のロスを無くすために、Flexboxのよく使うポイントを備忘しておきたいと思います。

Sample HTML

今回デモ表示するサンプルのHTMLコードです。 <ul class='header'> <li>A</li> <li>B</li> <li>C</li> </ul>

普通のヘッダメニュー（横並び）

• A
• B
• C

ul.header{ border:1px solid red; margin:10px; padding:10px; display:flex; gap:10px; } ul.header > *{ list-style:none; background-color:blue; color:white; margin:0; padding:10px; font-size:0.8em; } display:flex; をセットするだけで、通常並びになる要素を横並びにすることができます。

左右のリスト位置を整える

中心に表示する

• A
• B
• C

リスト郡を表示の中心に揃える場合は、 justify-content:center; をセットするだけです。 ul.header.flex{ display:flex; justify-content:center; }

右寄せ

• A
• B
• C

ul.header.flex{ display:flex; justify-content:end; }

左寄せ

• A
• B
• C

ul.header.flex{ display:flex; justify-content:start; }

リスト要素の横幅調整

良いカンジに幅いっぱいにする

• A
• B
• C

隙間が空いてしまうのがイヤな場合は、リスト項目に、 flex:1; をつけると、隙間を埋めるためのサイズを自動でセットしてくれます。 ul.header.flex > *{ flex:1; } すべてのリスト要素に flex:1; を付ける必要はありません。 flex:1; を付けた要素が、空いてしまう隙間を埋めるためのサイズを保管してくれます。

サイズは変えずに均等幅にそろえる

• A
• B
• C

ul.header.flex{ justify-content:space-around; }

左右の空間を埋めた均等幅

• A
• B
• C

ul.header.flex{ justify-content:space-between; }

左右にリストを振り分ける

• A
• B
• C

左側を通常メニュー、右側をシステムメニューや、言語切替などに使いたい場合、境目のリストに margin-left:auto; をセットするだけで、左右に切り分けてくれます。 ul.header.flex > *:nth-of-type(3){ margin-left:auto; }

縦サイズがリストサイズより大きい場合

• A
• B
• C

flexでは、リスト要素にサイズが指定されていな場合は、自動的にflexの親要素のサイズと同じになります。 ul.header.flex{ height:100px; }

• A
• B
• C

リスト要素にサイズが書かれている場合は、親要素のサイズは変わらずに、指定されたサイズが適用されます。 ul.header.flex{ height:100px; } ul.header.flex > *:nth-of-type(3){ height:50px; }

リスト項目が親リストのサイズよりも大きい場合

• A
• B
• C

はみ出ます。 ul.header.flex{ height:100px; } ul.header.flex > *:nth-of-type(3){ height:50px; }

縦サイズ調整

中心

• A
• B
• C

align-items:center; をリスト要素にセットすると、縦サイズの中心にリスト要素を配置してくれます。 ul.header.flex{ height:100px; display:flex; align-items:center; }

上部

• A
• B
• C

ul.header.flex{ height:100px; display:flex; align-items:start; }

下部

• A
• B
• C

ul.header.flex{ height:100px; display:flex; align-items:end; }

裏技

サイズ指定されている要素の中身を縦の中心に表示したい場合

• A
• B
• C

ul.header.flex > *{ display:flex; align-items:center; } リスト項目それぞれに、display:flex; と、 align-items:center;をセットするのがポイントです。

リストを中心表示しつつ、１つだけ右端に表示したい場合

• A
• B
• C

ul.header.flex > *{ display:flex; align-items:center; } この技を使った場合、画面幅によって、リスト項目が重なってしまう可能性があるので、サイズ調整をしっかりと計算する必要があります。

リファレンスサイト

参考 : https://developer.mozilla.org/ja/docs/Web/CSS/flex