ホームページを制作する時に、何かと使い倒すFlexbox。
たまにうまく扱えなくなることがあり、調べてみると以前にも支えていたということを思い出す。
こうした時間のロスを無くすために、Flexboxのよく使うポイントを備忘しておきたいと思います。
Sample HTML
今回デモ表示するサンプルのHTMLコードです。
<ul class='header'>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
普通のヘッダメニュー（横並び）
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; をセットするだけで、通常並びになる要素を横並びにすることができます。
左右のリスト位置を整える
中心に表示する
リスト郡を表示の中心に揃える場合は、
justify-content:center; をセットするだけです。
ul.header.flex{
display:flex;
justify-content:center;
}
右寄せ
ul.header.flex{
display:flex;
justify-content:end;
}
左寄せ
ul.header.flex{
display:flex;
justify-content:start;
}
リスト要素の横幅調整
良いカンジに幅いっぱいにする
隙間が空いてしまうのがイヤな場合は、リスト項目に、
flex:1; をつけると、隙間を埋めるためのサイズを自動でセットしてくれます。
ul.header.flex > *{
flex:1;
}
すべてのリスト要素に flex:1; を付ける必要はありません。
flex:1; を付けた要素が、空いてしまう隙間を埋めるためのサイズを保管してくれます。
サイズは変えずに均等幅にそろえる
ul.header.flex{
justify-content:space-around;
}
左右の空間を埋めた均等幅
ul.header.flex{
justify-content:space-between;
}
左右にリストを振り分ける
左側を通常メニュー、右側をシステムメニューや、言語切替などに使いたい場合、境目のリストに margin-left:auto; をセットするだけで、左右に切り分けてくれます。
ul.header.flex > *:nth-of-type(3){
margin-left:auto;
}
縦サイズがリストサイズより大きい場合
flexでは、リスト要素にサイズが指定されていな場合は、自動的にflexの親要素のサイズと同じになります。
ul.header.flex{
height:100px;
}
リスト要素にサイズが書かれている場合は、親要素のサイズは変わらずに、指定されたサイズが適用されます。
ul.header.flex{
height:100px;
}
ul.header.flex > *:nth-of-type(3){
height:50px;
}
リスト項目が親リストのサイズよりも大きい場合
はみ出ます。
ul.header.flex{
height:100px;
}
ul.header.flex > *:nth-of-type(3){
height:50px;
}
縦サイズ調整
中心
align-items:center; をリスト要素にセットすると、縦サイズの中心にリスト要素を配置してくれます。
ul.header.flex{
height:100px;
display:flex;
align-items:center;
}
上部
ul.header.flex{
height:100px;
display:flex;
align-items:start;
}
下部
ul.header.flex{
height:100px;
display:flex;
align-items:end;
}
裏技
サイズ指定されている要素の中身を縦の中心に表示したい場合
ul.header.flex > *{
display:flex;
align-items:center;
}
リスト項目それぞれに、
display:flex; と、
align-items:center;をセットするのがポイントです。
リストを中心表示しつつ、１つだけ右端に表示したい場合
ul.header.flex > *{
display:flex;
align-items:center;
}
この技を使った場合、画面幅によって、リスト項目が重なってしまう可能性があるので、サイズ調整をしっかりと計算する必要があります。
リファレンスサイト
参考 :
https://developer.mozilla.org/ja/docs/Web/CSS/flex
