Flexboxとは？
Flexboxとは、柔軟なボックスレイアウトを可能にするCSSの仕様のこと。
正式名称は、「CSS Flexible Box Layout Module」
使い方
cssにdisplay: flex;を設定するだけ。
以下、サンプル。
<html> <head> <title></title> <link rel="stylesheet" type="text/css" href="./test.css"> </head> <body> <nav> <ul class="main-nav"> <li><a href="#" class="logo">Logo</a></li> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> <li><a href="#">Menu 4</a></li> </ul> </nav> </body> </html>
.main-nav a { margin: 10px; border-radius: 5px; background: #60B99A; color: #fff; display: block; padding: 15px; text-decoration: none; } .main-nav .logo { background: #4584b1; } .main-nav { display: flex; list-style:none; }
こうすると<li>タグのやつが均等配置されるはず！
配置
CSSの定義を変更すると配置方法が変わる。
実際の利用法としては、定義をしておいて、JavaScriptで属性を動的に変えて並び替える。
そうすると勝手にレイアウトが変わる。
今までだともっと細かく設定をしてやらないと行けなかったのが、簡単にできるようになる。
折り返し
flex-directionで指定する。
- row : デフォルト値。左から右へ順番に並べる。
- column : 上から下に順番に並べる。
- row-reverse : rowの逆に並べる。
- column-reverse : columnの逆順に並べる。
繰り返し
flex-wrapで設定する。
単一行/複数行を設定する。
- nowrap : 初期値。折り返しなしの単一行。
- warp : 折り返しありの複数行。
- warp-reverse : 折り返しありで、折り返した場合、次の行が上に来る。
横方向
justify-contentで指定する。
flex-direction > justify-contentの関係。
flex-directionをベースに並び替えを行う。
矛盾する配置はflex-directionが優先される。
例えば、flex-direction:column, justify-content:flex-endなら、上から下に要素が並ぶ。
- flex-start : デフォルト値。右寄せ
- flex-end : 左寄せ
- center : 中央揃え
- space-between : 均等に間隔を開けて配置する。
- space-around : space-betweenとほぼ同じ。左右の端にも間隔を開ける。
縦方向
align-itemsで設定する。
justify-content > align-itemsの関係。
justify-contentをベースに並び替えを行う。
- flex-start : デフォルト値。上揃え。
- flex-end : 下揃え。
- center : 中央揃え
- baseline : ベースラインに揃える。考え方がよくわからん！centerとほぼ同じでは？
- stretch : 高さが設定されていない場合、要素内で最大の高さに合わせる。
行の揃え方
align-contentで指定する。
flex-warp : nowrap 以外を設定した場合に有効になる。
justify-content > align-contentの関係。
- flex-start : 横配置→上揃え。縦配置→左揃え。
- flex-end : 横配置→下揃え。縦配置→右揃え。
- flex-center : 中央揃え。
- space-between : 行の上下に間隔を開けて配置。
- space-around : 行の上下に間隔を開けて配置。端にも間隔を開ける。
プロパティ設定
flexで指定する。
flexは、flex-grow, flex-shrink, flex-basisの設定を同一にできるショートハンド。
flex-grow, flex-shrink, flex-basisで設定しても問題ないが、W3Cで推奨されており、読めたほうがメリットが大きい。
デフォルト値: 0 1 auto
CSS Flexible Box Layout Module Level 1
設定例
.flex-item { flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ]; }
各プロパティの説明
flex-grow
Flexアイテムの「伸びる」倍率
flex-shrink
Flexアイテムの「縮む」倍率
flex-basis
ベースとなる長さの設定
参考サイト
CSS Flexible Box Layout Module Level 1
