Flexboxのプロパティと使い方をわかりやすくまとめてみた
Flexboxのプロパティを全種類まとめてみました。
親要素に設定するものと子要素に設定するものとがあります。
bootstrapと比べても配置位置や順番などをコントロールするのにFlexboxは向いています。
Flexboxを使った横並びレイアウトシステム
CSS3で横並びレイアウトを実現する際によく使われるのが、bootstrapのグリッドシステムやFlexboxですよね。
他にも方法はたくさんありますが、今回はFlexboxについて一通りまとめてみたいと思います。
FlexboxはCSS3から導入されたレイアウトモジュールで、正式名称は「Flexible Box Layout Module」です。
それまでのfloat系レイアウトに代わり、横並びをより簡単にかつ安定させたシステムとなります。
Flexboxの基本
Flexboxは基本的に以下2つの要素で構成されます。
・コンテナ（親要素）
・アイテム（子要素）
flexboxが設定されたコンテナ（親要素）の中にアイテム（子要素）が入る事で、横並びします。
Flexboxの構成ソース
HTML
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> </div>
CSS
.container{ display: flex; }
サンプル例
親要素のcontainerに「display: flex;」を指定するだけで、子要素がフロートしています。
上記はそれ以外の設定をしていないので、要素全体が左に寄っています。
子要素のitemにも、ここでは特に指定をしていません。
flexプロパティ
親要素（container）に使用できるflexプロパティがたくさんあります。
flex-direction…アイテムの並び順を指定する
flex-wrap…アイテムの折り返しを指定する
flex-flow…アイテムの並び順と折り返しを一括で指定する
justify-content…アイテムの水平方向の位置を指定する
align-items…アイテムの垂直方向の位置を指定する
align-content…アイテムの行の垂直方向の位置を指定する
これらは全てdisplay: flex;と一緒に、追加で指定します。
一つずつご紹介していきましょう。
flex-directionは並び順を操作
flex-directionは、アイテムを配置する順番を指定するプロパティです。
flex-direction: row; …左から右に並べる
flex-direction: row-reverse; …右から左に並べる
flex-direction: column; …上から下に並べる
flex-direction: column-reverse; …下から上に並べる
flex-directionの構成例
CSS
.container { display: flex; flex-direction: row; } .container { display: flex; flex-direction: row-reverse; } .container { display: flex; flex-direction: column; } .container { display: flex; flex-direction: column-reverse; }
flex-direction: row;
デフォルトの状態であり、未指定の際にこのようになります。
flex-direction: row-reverse;
ソースの並びはそのままでも、右端を基準に左へ並べる事ができます。
flex-direction: column;
横並びを解除し縦に並べたケースです。
flex-direction: column-reverse;
ソースの並びはそのまま、降順に並べる事ができます。
flex-wrapは折り返しを操作
flex-wrapは、アイテムの折り返しを指定するプロパティです。
nowrap（デフォルト）…折り返しなし
wrap…上から下へ折り返す
wrap-reverse…下から上へ折り返す
flex-wrapの構成例
CSS
.container { display: flex; flex-wrap: nowrap; } .container { display: flex; flex-wrap: wrap; } .container { display: flex; flex-wrap: wrap-reverse; }
flex-wrap: nowrap;
何列あっても段落ちされずに並びます。
枠をはみ出す場合がありますので、スマホ版ではwrap設定にしています。
flex-wrap: wrap;
通常通り段落ちして上から下に並びます。
flex-wrap: wrap-reverse;
下から上に段上がりします。
flex-flowで横並びと折り返しを一括指定
flex-directionとflex-wrapを一括指定できるのが、flex-flowです。
flex-flow: 「flex-directionの値」「[flex-wrapの値」;
flex-flowの構成例
CSS
.container { display: flex; flex-flow: row nowrap; }
上記の様に設定すると「左から右に配置」しつつ「折り返しはなし」になります。
半角スペースを空けて「direction」の値と「wrap」の値を続けて入れる事ができるので、大変便利ですね。
justify-contentは水平方向の位置を操作
justify-contentは、水平方向の位置を指定するプロパティです。
flex-start（デフォルト）…アイテムを左揃えで配置
flex-end…アイテムを右揃えで配置
center…アイテムを左右中央揃えで配置
space-between…最初と最後のアイテムは端につけ、残りは均等配置
space-around…全アイテム均等間隔で配置
justify-contentの構成例
CSS
.container { display: flex; justify-content: flex-start; } .container { display: flex; justify-content: flex-end; } .container { display: flex; justify-content: center; } .container { display: flex; justify-content: space-between; } .container { display: flex; justify-content: space-around; }
justify-content: flex-start;
通常通りの左揃えです。
justify-content: flex-end;
右揃えの状態になります。
justify-content: center;
中央寄せの状態です。
justify-content: space-between;
左端と右端の要素は余白ゼロで枠に密着し、それ以外が均等割りされた状態ですね。
justify-content: space-around;
全ての要素が均等割りされます。左端と右端にも余白があるのがポイントです。
align-itemsは垂直方向の位置を操作
align-items は、要素の垂直方向の位置を指定するプロパティです。
stretch（デフォルト）…アイテムを上下の余白を埋めるように配置
flex-start…アイテムを上揃えで配置
flex-end…アイテムを下揃えで配置
center…アイテムを上下中央揃えで配置
baseline…アイテムをベースラインに合わせて配置
align-itemsの構成例
CSS
.container { display: flex; align-items: stretch; } .container { display: flex; align-items: flex-start; } .container { display: flex; align-items: flex-end; } .container { display: flex; align-items: center; } .container { display: flex; align-items: baseline; }
align-items: stretch;
枠の高さにあわせて子要素が広がっています。
align-items: flex-start;
枠に高さがあっても子要素のサイズを守って上揃えしています。
align-items: flex-end;
今度は逆に下揃えのパターンです。
align-items: center;
これは上下の中央揃えしている状態ですね。
align-items: baseline;
各子要素に高さや位置の差があっても、文字の下位置（ベースライン）が揃うパターンです。
align-contentは複数行の時の垂直方向の位置を操作
align-contentは、複数行がある際の垂直方向の位置を操作するプロパティです。
stretch（デフォルト）…親要素の高さに合わせて広げて配置
flex-start…アイテムの行を上揃えで配置
flex-end…アイテムの行を下揃えで配置
center…アイテムの行を上下中央揃えで配置
space-between…最初と最後の子要素を両端、残りは均等に配置
space-around…全て均等に間隔をあけて配置
align-contentの構成例
CSS
.container { display: flex; align-content: stretch; } .container { display: flex; align-content: flex-start; } .container { display: flex; align-content: flex-end; } .container { display: flex; align-content: center; } .container { display: flex; align-content: space-between; } .container { display: flex; align-content: space-around; }
align-content: stretch;
親要素の高さを2段で敷き詰めるように、子要素が広がります。
align-content: flex-start;
何段あっても上揃えしていくパターンですね。
align-content: flex-end;
何段あっても下揃えされるパターンです。
align-content: center;
何段あっても上下の中央を軸に揃えていくパターンです。
align-content: space-between;
最上段は上橋に、最下段は下端にくっつきます。それ以外は上下均等に割り振られます。
align-content: space-around;
各段全て枠に対して上下均等に割り振られますので、上端と下端に余白ができます。
スマホ版では違いがわかりませんので、PC版をご覧ください。
子要素（.item）に指定するプロパティ
次にアイテム側（子要素item）に使用できるプロパティをご説明していきます。
order…アイテムの並び順を指定
flex-grow…アイテムの占有率を操作
flex-shrink…アイテムの縮み率を指定
flex-basis…アイテムのベースの幅を指定
flex…アイテムの伸び率、縮み率、ベースの幅を一括指定
align-self…アイテムの垂直方向の位置を指定
orderは並び順を指定できます。
アイテムの1つ1つにorderを指定する事で、HTMLの記述順に関わらず要素の並びを操作できます。
子要素へのCSS
.item1{ order: 2; } .item2{ order: 3; } .item3{ order: 1; }
デフォルト値は0ですが、「-」マイナス数値を指定する事もできます。
サンプル例
CSSで要素の順番を自在に設定できますが、HTMLの子要素をそれぞれ個別に定義する（item1,item2,item3）必要があります。
flex-growは倍率を操作
アイテムのサイズ倍率を大きくするプロパティです。
子要素へのCSS
.item1 { flex-grow:2; } .item2{ flex-grow:1; } .item3{ flex-grow:3; }
サンプル例
アイテムの占める割合を変更する事ができます。
flex-shrinkはマイナス倍率を操作
アイテムのサイズを小さくするプロパティです。数値が2なら2分の1、3なら3分の1とサイズになります。
子要素へのCSS
.item1{ flex-shrink:1; } .item2{ flex-shrink:2; } .item3{ flex-shrink:1; }
サンプル例
各子要素が全て同じ幅の際に、item2だけが2分の1のサイズになります。
flex-basisはベースの幅を操作
flex-basisは、アイテムの占める幅を％指定するプロパティです。
子要素へのCSS
.item1{ flex-basis:10%; } .item2{ flex-basis:60%; } .item3{ flex-basis:30%; }
サンプル例
設定通り左から、10％、60％、30％になっています。
flexで、伸び率、縮み率、ベースの幅を一括指定できる
上記で紹介した3つのプロパティを、子要素にそれぞれ指定するのは手間ですよね。
「flex」を使えば、半角スペースを空けてまとめて指定できます。
flex:「flex-growの値」「flex-shrinkの値」「flex-basisの値」;
子要素へのCSS
.item1{ flex: 1 0 20%; } .item2{ flex: 2 0 30%; } .item3{ flex: 1 0 50%; }
border: solid 1px #000;等と同じ様に、幅・縮み・％を指定する事ができる訳ですね。
align-selfは子要素の垂直方向を揃える
align-selfは、親要素に指定するalign-itemsと全く同じプロパティです。
ですが親要素へのalign-itemsよりも、子要素へ設定するalign-selfの方が優先されます。
auto（デフォルト）…親要素のalign-itemsの値を使用
stretch…アイテムを上下の余白を埋めるように配置
flex-start…アイテムを上揃えで配置
flex-end…アイテムを下揃えで配置
center…アイテムを中央揃えで配置
baselne…アイテムをベースラインに合わせて配置
子要素へのCSS
.item1{ align-self: auto; } .item2{ align-self: stretch; } .item3{ align-self: flex-start; } .item4{ align-self: flex-end; } .item5{ align-self: center; } .item6{ align-self: baseline; }
align-self: auto;
align-self: strech;
align-self: flex-start;
align-self: flex-end;
align-self: center;
align-self: baseline;
bootstrapとの違い
プロパティも豊富で多彩なレイアウトが可能なFlexboxのプロパティを紹介しました。
ここでもう一つ人気の「bootstrapのグリッドシステム」との大きな違いについて触れておきたいと思います。
レイアウト可変時に対応しやすいのはbootstrap
bootstrapはHTMLソース上のグリッド指定部分をいじれば、3列から4列・6列などへ瞬時にレイアウトを変更する事ができます。
例えば6列2段で並べていた12個項目を、4列3段へ変更する事も簡単な訳です。
要素上の「col-lg-2」の箇所を「col-lg-3」へ変更するだけですからね。
画面幅に応じた可変も簡単
さらに画面幅に応じた条件分岐の設備（lg,md,sm,xsなど）が整っています。
複数の設定を同時に目視で設定できるのはありがたいと思います。
それに対しFlexboxの場合は、段落ちのため子要素の幅をCSSで調節したり、別途親要素を並べる必要があります。
そういう意味でレイアウト可変時の操作性に関してはbootstrapの方があると思います。
配置位置を自在に変更できるのはflexbox
逆に、掲載順番を変更したり上下左右への配置調整をするなら、flexboxの方が抜群に良いです。
左右の端の余白を出さない設定もflexboxならすぐですからね。
bootstrapの方で寄せ方を調整したり昇順降順を実現するには、その都度HTMLソースの追記が必要になります。
レイアウト可変ならbootstrap、設置位置調整ならflexboxが有利といったところでしょうか。
併用して使いたい
そもそもbootstrapは、グリッドシステムだけではありません。
フレームワークを読込する事で様々な設定済み機能が使える点も魅力です。
それに対してflexboxは、CSS3の標準搭載機能ですから併用する事が可能です。
どちらかに固執するのではなく、両方のメリットを生かして併用するのがベストではないでしょうか。
