プラカンブログSTAFF BLOG

2018.04.11

【CSS】今更ながら、フレックスボックスの使い方をまとめてみた。

こんにちは。デザイナーのSUGIYAMAです。

前に「意外と忘れがち?CSSで要素を上下左右に中央配置する方法」という記事で少し紹介しましたが、フレックスボックス(display:flex)には様々な使い方があるので、ど忘れ防止もこめて、ご紹介します。


そもそもFlexboxって?

FlexboxとはCSS3から使用できる新しいレイアウトモジュールです。
複雑なレイアウトでも今までより少ないコードで、実装することができます。

フレックスボックスのブラウザのサポート状況

  • Internet Explorer 11+
  • Firefox 28+
  • Chrome 29+
  • Safari 6.1+ (プレフィックス: -webkit-)
  • iOS 7.1+ (プレフィックス: -webkit-)
  • Android 4.4+

Flexboxの基本的な記述方法

まずはHTMLから。複数の子要素を親要素で囲います。

HTML
<div class="parent">
<div class="children01">子要素01</div>
<div class="children02">子要素02</div>
<div class="children03">子要素03</div>
<div class="children04">子要素04</div>
</div>

まずはFlexboxコンテナーを指定しよう

Flexboxを使用するには、親要素にFlexコンテナーを定義する必要があります。
HTMLの親要素に「display: flex;」を指定するだけです。逆にこれを定義しないと、今から紹介するプロパティを指定しても効きません。

 
.parent {
   display: -webkit-flex;
   display: flex;
}

インライン要素に使う場合は「display: inline-flex;」

 
.parent {
   display: -webkit-inline-flex;
   display: inline-flex;
}
 

Flexboxコンテナーに指定するプロパティ

ではFlexboxコンテナーで指定できるプロパティを紹介していきます。

flex-direction

子要素をどの方向に配置していくかを指定するプロパティー。方向は2種類になり、横列の水平、縦列の垂直に配置できます。

.parent {
   -webkit-flex-direction: row;
   flex-direction: row;
}
使える値
row(初期値) 子要素を左から右に配置されます。
row-reverse 子要素を右から左に配置されます。
column 子要素を上から下に配置されます。
column-reverse 子要素を下から上に配置されます。
row
子要素01
子要素02
子要素03
子要素04
row-reverse
子要素01
子要素02
子要素03
子要素04
column
子要素01
子要素02
子要素03
子要素04
column-reverse
子要素01
子要素02
子要素03
子要素04

flex-wrap

子要素を一行、または複数行に並べるかを指定します。
flexboxの初期値では、一行にアイテムが並ぶようになっており、子要素に幅を指定しても
一行に収まるように自動的に変更されてしまいます。

.parent {
   -webkit-flex-wrap: nowrap;
   flex-wrap: nowrap;
}

使える値
nowrap(初期値) 子要素を折り返しせず、一行に配置されます。
wrap 子要素を折り返し、複数行に上から下へ配置されます。
wrap-reverse 子要素を折り返し、複数行に下から上へ配置されます。
nowrap
子要素01
子要素02
子要素03
子要素04
wrap
子要素01
子要素02
子要素03
子要素04
wrap-reverse
子要素01
子要素02
子要素03
子要素04

flex-flow

flex-directionとflex-wrapをまとめて指定できるプロパティです。

.parent {
   -webkit-flex-flow: row nowrap;
   flex-flow: row nowrap;
}

justify-content

flexコンテナーに空きスペースがあった場合、水平方向のどの位置に配置するかを指定します。

.parent {
   justify-content: flex-start;
}
使える値
flex-start(初期値) 行の開始位置から配置。左揃え。
flex-end 行末から配置。右揃え。
center 中央揃え
space-between 最初と最後の子要素を両端に配置し、残りの要素は均等に間隔をあけて配置
space-around 両端の子要素も含め、均等に間隔をあけて配置
flex-start
子要素01
子要素02
子要素03
子要素04
flex-end
子要素01
子要素02
子要素03
子要素04
center
子要素01
子要素02
子要素03
子要素04
space-between
子要素01
子要素02
子要素03
子要素04
space-around
子要素01
子要素02
子要素03
子要素04

align-items

flexコンテナーに空きスペースがあった場合、垂直方向のどの位置に配置するかを指定します。

.parent {
   align-items: stretch;
}
使える値
stretch(初期値) 親要素の高さ、またはコンテンツの一番多い子要素の高さに合わせて広げて配置
flex-start 親要素の開始位置から配置。上揃え。
flex-end 親要素の終点から配置。下揃え。
center 中央揃え
baseline ベースラインで揃える
stretch
子要素01
子要素02
子要素03
子要素04
flex-start
子要素01
子要素02
子要素03
子要素04
flex-end
子要素01
子要素02
子要素03
子要素04
center
子要素01
子要素02
子要素03
子要素04
baseline
子要素01
子要素02
子要素03
子要素04

align-content

子要素が複数行に渡った場合の垂直方向の揃えを指定します。
justify-contentと似ていますが、「align-content」プロパティはクロス軸の垂直方向に揃えて配置します。
※flex-wrap: nowrap; が適応されていると子要素が一行になるので、無効になります。

.parent {
   align-content:stretch;
}
使える値
stretch(初期値) 親要素の高さに合わせて広げて配置
flex-start 親要素の開始位置から配置。上揃え。
flex-end 親要素の終点から配置。下揃え。
center 中央揃え
space-between 最初と最後の子要素を上下の端に配置し、残りの要素は均等に間隔をあけて配置
space-around 上下端にある子要素も含め、均等に間隔をあけて配置
stretch
子要素01
子要素02
子要素03
子要素04
flex-start
子要素01
子要素02
子要素03
子要素04
flex-end
子要素01
子要素02
子要素03
子要素04
center
子要素01
子要素02
子要素03
子要素04
space-between
子要素01
子要素02
子要素03
子要素04
space-around
子要素01
子要素02
子要素03
子要素04

子要素(Flexアイテム)に指定するプロパティ

Flexboxコンテナーと定義すると、子要素は自動的に「Flexboxアイテム」となります。
子要素で指定できるプロパティは以下の通りです。

order

子要素を任意の順で並べ替えられます。

子要素01
子要素02
子要素03
子要素04
.children01 {order: 2; }
.children02 {order: 1; }
.children03 {order: 4; }
.children04 {order: 3; }

使える値
数値のみです。初期値は1で、マイナス値は無効になります。

flex-grow

親要素にスペースがある場合、子要素が他の子要素に対してどれくらい伸びるかを指定します。

子要素01
子要素02
子要素03
子要素04
.children02 {flex-grow: 5; }

使える値
数値のみです。初期値は1で、マイナス値は無効になります。

flex-shrink

flex-growと逆で、親要素にスペースがなく子要素が入り切らない場合、指定のある子要素が他の子要素に対してどれくらい縮むかを指定します。

子要素01
子要素02
子要素03
子要素04
.children02 {flex-shrink: 5; }

使える値
数値のみです。初期値は0で、マイナス値は無効になります。

flex-basis

widthと同じように幅の値を指定できます。autoと指定した場合は子要素のコンテンツのサイズが適応されます。

子要素01
子要素02
子要素03
子要素04
.children02 {flex-basis: 200px; }

使える値
初期値はautoです。幅の指定と同様、パーセンテージやピクセル値で指定できます。

flex

flex-grow、flex-shrink、flex-basis の3つのプロパティーを一行で指定できます。
初期値は 0(flex-grow) 1(flex-shrink) auto(flex-basis)です。

.children02 {flex: 0 5 200px; }

align-self

親要素に高さにスペースがある場合、子要素を垂直方向のどの位置に配置するかを指定します。
flexコンテナに指定するalign-itemsと同じ機能ですが、こちらに指定がある場合は、align-itemsよりも優先されます。

.children01 {align-self: auto;}
使える値
auto(初期値) 親要素の align-items の値を継承
stretch 親要素の高さ、またはコンテンツの一番多い子要素の高さに合わせて広げて配置
flex-start 親要素の開始位置から配置。上揃え。
flex-end 親要素の終点から配置。下揃え。
center 中央揃え
baseline ベースラインで揃える
stretch
子要素01
子要素02
子要素03
子要素04
flex-start
子要素01
子要素02
子要素03
子要素04
flex-end
子要素01
子要素02
子要素03
子要素04
center
子要素01
子要素02
子要素03
子要素04
baseline
子要素01
子要素02
子要素03
子要素04

まとめ

Flexboxの登場で要素を横並びを実装するがだいぶ簡単になりましたが、レイアウトによってはFloatで実装したほうが良い場合もあり、Flexbox一択ではないのが実際触ってみた感想です。ただしメリットもたくさんあるので、使い分けて使用するといいと思います!

この記事は1年以上前の記事で内容が古くなっている場合があります。

+dc(杉)

この記事は、SUGIYAMA が書きました。