Flexboxについて、いくつかの記事を参照して基本的な事をまとめました。
親要素[コンテナ]と子要素[アイテム]
Flexboxコンテナ
Flexboxモデルを使うためには必ずこの「Flexboxコンテナー」が必要です。
CSSで「display:flex」と指定すれば、
要素を「Flexboxコンテナ」として定義することができます。
Flexboxアイテム
「Flexboxコンテナ」の子要素であれば勝手に「Flexboxアイテム」となるので、
特にCSSで指定する必要はないです。
また、Flexboxアイテムに該当する要素は、
様々なFlexboxアイテム用のプロパティが使えるようになります。
1 [Flexboxコンテナ（親）]を作成
親要素に対して display:flex を指定します。
display:flex
#wrapper{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}
※各ブラウザに対応するため、
「display: flex;」にベンダープレフィックスを設定します。
Chromeは最新の仕様に準拠しています。
（以降の作例では、ベンダープレフィックスは省略します）
2 親要素に対して指定する設定
[子要素に一括でレイアウトの設定をする]
[Flexboxコンテナ（親）]に対してcssを指定すると、
子要素に対するレイアウトの設定が一括で設定されます。
例：flex-direction:row;
#wrapper{
display: flex;
flex-direction:row; /* 子要素の配置方向の設定 */
}
[配置方向、行の設定]
flex-direction:row; [子要素の配置方向]
初期値は row
- row [横配置]
- row-reverse [横配置：逆]
- column [縦配置]
- column-reverse [縦配置：逆]
flex-wrap:nowrap; [子要素の折り返し設定（行の設定）]
初期値は nowrap
- nowrap [単一業]
- wrap [複数行]
- wrap-reverse [複数行：逆]
単一行：子要素を全て一行に詰めようとする。親要素からはみ出ても「改行」は決してしない。
複数行：子要素が親の長さを超えてしまった場合、折り返して「複数行」に分割される。
align-content:flex-start; [行の揃え方]
初期値は flex-start
「flex-wrap」で「nowrap」以外に設定した場合のみ有効です。
つまり複数行になったときの揃え方です。
「justify-content」と似ています。
- flex-start [上揃え or 左揃え]
- flex-end [下揃え or 右揃え]
- center [中央揃え]
- space-around [均等に間隔を空ける]
- space-between [均等に間隔を空け、條辺の端にFIT]
[水平、垂直に対する設定]
justify-content × align-items
上記の組合せで、
様々なレイアウトが簡単に実現できます。
やっかいな「水平垂直中央揃え」などが簡単に実装できたりします。
justify-content:flex-start; [子要素の水平方向の揃え方]
初期値は flex-start
「flex-direction」で指定した子要素の配置方向をベースに、様々な揃え方を指定できます。
- flex-start [上揃え or 左揃え]
- flex-end [下揃え or 右揃え]
- center [中央揃え]
- space-around [均等に間隔を空ける]
- space-between [均等に間隔を空け、両脇は端にFIT]
※「利用可能な領域」が存在するときにのみ効果を確認できます。
「flex」プロパティが設定されてないとき、
設定したが最大サイズに達したときは効果を確認できません。
align-items:flex-start; [子要素の垂直方向の揃え方]
初期値は flex-start
「justify-content」の垂直方向の軸に対して揃えます。
デフォルトでは、垂直方向に揃えです。
- flex-start [上揃え or 左揃え]
- flex-end [下揃え or 右揃え]
- center [中央揃え]
- baseline [ベースライン（要素のお尻）を揃える]
- stretch [高さを揃える]
※「stretch」はFlexアイテムの高さが設定されている場合、上下一杯まで広げます。
高さが設定されていない場合、コンテンツ内の最も高いFlexアイテムの高さに合わせて自動的に広げます。
3 子要素に対して指定する設定
[子要素に個別にレイアウトの設定をする]
[Flexboxアイテム（子）]に対して使うプロパティです。
- flex [flexアイテムの伸縮の設定]
- align-self [flexアイテムの垂直方向の揃えの設定]
- order [順番指定]
などがあります。
[flex プロパティ（flexアイテムの伸縮）]
flex-grow:1;
Flexアイテムの「伸びる」倍率。
コンテナ内のアイテム達の長さが、コンテナの長さに満たない場合に発動する。
コンテナ内にちょうど収まる様に長さを自動的に計算して伸びる。
#wrapper{
display: flex;
}
#wrapper li{
flex-grow:1; /* Flexアイテムの伸びる倍率 */
}
#wrapper li:nth-child(1){
flex-grow:3; /* 1つめの要素だけ3倍伸びる */
}
flex-shrink:1;
Flexアイテムの「縮む」倍率。
コンテナ内のアイテム達の長さが、コンテナの長さを超えている場合に発動する。
コンテナ内にちょうど収まる様に長さを自動的に計算して縮む。
#wrapper{
display: flex;
}
#wrapper li{
flex-shrink:1; /* Flexアイテムの縮む倍率 */
}
#wrapper li:nth-child(1){
flex-shrink:3; /* 1つめの要素だけ3倍縮む */
}
flex-basis:auto;
ベースとなる長さ(最小の長さ)を設定します。
省略した場合、値は「0」と指定されます。
「auto」と指定した場合、Flexアイテムの「コンテンツサイズ」に設定される。
各Flexアイテムのコンテンツサイズが違うと長さもまちまちになるので、絶対的な長さを指定したい場合は「auto」ではなく数字で指定するといいです。
#wrapper{
display: flex;
}
#wrapper li{
flex-basis:20px; /* Flexアイテムのベースとなる長さ */
}
[個別のFlexアイテムの垂直方向の揃え方]
align-self
Flexアイテムの垂直方向の揃えに関する設定。
「align-items」と同様の働きをします。
違いはFlexアイテムに個別に指定する、という点です。
[順番指定]
order:1;
表示する順番を変える事ができます。
wrapper{
display: flex;
}
wrapper li:nth-child(1){
order:3; /* 1つめの要素を3番目に表示 */
}
wrapper li:nth-child(3){
order:1; /* 3つめの要素を1番目に表示 */
}
※「order」プロパティによって変えられたのはあくまでビジュアル的な順番です。
実際にHTMLの構造自体を変えたことではないので、
スピーチ機能やJSなどの論理的なタスクを行う上で支障が出る場合があります。
IE8/IE9でもFlexboxを使う
1 flexibility.jsを読み込む
▼flexibility.js
https://github.com/jonathantneal/flexibility
▼CDNライブラリ
https://cdnjs.cloudflare.com/ajax/libs/flexibility/2.0.1/flexibility.js
2 Flexboxを使用する要素のCSSに一行追加
.wrapper{
-js-display: flex;
display: flex;
}
参考にした記事
▼CSS3のFlexboxを基本から理解して、使い倒そう！
https://liginc.co.jp/web/html-css/css/21024
▼これからのCSSレイアウトはFlexboxで決まり！
http://www.webcreatorbox.com/tech/flexbox/
▼【CSS】Flexboxのプロパティ（flex-grow、flex-shrink、flex-basis、flex）を紹介します
http://scene-live.com/page.php?page=58
▼IE8・9にもFlexboxを対応させる、flexibility.jsがとっても便利！
http://www.webcreatorbox.com/tech/ie8-flexbox/