Flexboxでレイアウトする

メニューを横並びにしたり、コンテンツを並べるとき、今まではfloatやtableなど使っても、高さが合わなかったり、レスポンシブに対応できなかったり。。いろいろと苦労がありました。
それを一気に解決するのがFlexboxです。

簡単に言うと

ul{
display:flex;
}

にするだけで、liが横並びになるんです!

素晴らしいのは、自動で伸縮したり、幅を計算して均等に配置してくれるところ。
borderやpaddingも包括してくれますのでとってもわかりやすいです。

メニューを作ろう

<ul class="flexmenu">
<li>home</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
</ul>
ul.flexmenu{
display:flex;
}

これだけでできました!
※liの装飾の記述は省略しています。

  • home
  • menu2
  • menu3
  • menu4
  • menu5

均等に配置

justify-content プロパティーで、要素と要素の間や、表示位置をカスタマイズできます。値を space-between とすると、最初の要素が左端に、最後の要素が右端に移動し、その間の要素は等間隔に並べられます。

ul.flexmenu{
display: flex;
justify-content: space-between;
}
  • home
  • menu2
  • menu3
  • menu4
  • menu5

その他の配置

その他にもさまざまなプロパティがあります。

右寄せ
 justify-content: flex-end; 
  • home
  • menu2
  • menu3
  • menu4
  • menu5
中央揃え
 justify-content: center; 
  • home
  • menu2
  • menu3
  • menu4
  • menu5
子ボックスの幅
 flex-basis:150px;
  • home
  • menu2
  • menu3
  • menu4
  • menu5
子ボックスの幅を倍率で指定
 flex-grow:2;
  • home
  • menu2
  • menu3
  • menu4
  • menu5
空いた隙間を埋める
.flexmenu > li:nth-child(5) {
flex: 1;
}
  • home
  • menu2
  • menu3
  • menu4
  • menu5

ブラウザの対応状況

ブラウザによって若干記述方法が違ってきたりします。
IE9以下は未対応です。
IE10はベンダープレフィックス(-ms-)が付きます
iOS 6.1以前のSafari、Android4.3以前のAndroidブラウザは、ベンダープレフィックス(-webkit-)つきます。

こちらのサイトで各ブラウザの一覧が見れます。
Can I us

一覧へ戻る