【CSS入門】Flexboxの基本と使い方まとめ【そろそろ覚えたい】

この記事ではdisplayプロパティの値である、flex（Flexbox）を紹介します。

Flexboxを覚えることで、サイトを作る際にレイアウトを組むのがかなり楽になりますので、必ず使えるようにしておきましょう（inline・block・inline-block・none・table・table-cellについては下記の記事をお読みください）。

Flexboxとは？

親要素にdisplay:flexを指定するだけで、直下の子要素は自動的に横並びになるなど、少しの記述だけで要素を柔軟に配置できるようになります。

display:flexを指定した親要素のことを「flexコンテナ」と呼び、その子要素を「flexアイテム」と呼びます。

HTML

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

CSS

.parent{
  display: flex;
}
   
.child{
  width: 200px;
  height: 200px;
}

CSSで横並びの表現をするとなるとfloatかinline-block、またはtable-cellを用途に応じて使い分けていましたが、Flexboxが登場してからは特にレイアウトを組むときはFlexboxを利用することが圧倒的に多くなりました。

flexコンテナ（親要素）に設定可能なプロパティ

親要素（flexコンテナ）に更に他のプロパティをつけることで、横並びにするだけでなく様々な配置が可能になります。

flex-direction

flexアイテムの表示方向を指定します。

flex-directionに指定できる値は以下の通りです。

値	説明
row	デフォルト。flexアイテムを親要素の左から右へ水平方向に配置
row-reverse	flexアイテムを親要素の右から左へ水平方向に配置
column	flexアイテムを親要素の上から下へ垂直方向に配置
column-reverse	flexアイテムを親要素の下から上へ垂直方向に配置

実際に使用するときは以下のように記述します。

HTML

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

CSS

.parent{
  display: flex;
  flex-direction: column;
}

.child{
  width: 200px;
  height: 200px;
}

flex-wrap

flexアイテムの折り返しの制御（一行にしたり複数行にしたり）を行います。

flex-wrapに指定できる値は以下の通りです。

値	説明
nowrap	デフォルト。改行なしで各アイテムの幅をflexコンテナの幅に収まるように縮小配置
wrap	flexアイテムを横複数行に配置
wrap-reverse	flexアイテムを横複数行に配置するが、文字の改行方向と逆方向へ折り返される

実際に使用するときは以下のように記述します。

HTML

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

CSS

.parent{
  display: flex;
  width: 500px;
  flex-wrap:wrap;   
}

.child{
  width: 200px;
  height: 200px;
}

justify-content

flexアイテムの左右の位置揃えを指定します。

justify-contentに指定できる値は以下の通りです。

値	説明
flex-start	デフォルト。flexアイテムを左揃え
flex-end	flexアイテムを右揃え
center	flexアイテムを左右中央揃え
space-between	flexアイテムを等間隔に配置（最初と最後の要素はflexコンテナの端にくっつく）
space-around	flexアイテムを等間隔に配置(flexコンテナの端との間にもそれぞれ間隔が空く)

実際に使用するときは以下のように記述します。

HTML

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

CSS

.parent{
  display: flex;
  justify-content: flex-end; 
}

.child{
  width: 200px;
  height: 200px;
}

align-items

flexアイテムの上下の位置揃えを指定します。

align-itemsに指定できる値は以下の通りです。

値	説明
stretch	デフォルト。flexコンテナの高さいっぱいにflexアイテムを配置
flex-start	flexアイテムを上揃え
flex-end	flexアイテムを下揃え
center	flexアイテムを上下中央揃え

実際に使用するときは以下のように記述します。

今までは、見やすくする為に、子要素に高さを指定しましたが、ここではそれぞれの値がどの様に作用するか理解してもらう為に、子要素には高さを指定せず、代わりに長さの違うテキストを入れています。

HTML

<div class="parent">
  <div class="child">Lorem</div>
  <div class="child">Lorem................</div>
  <div class="child">Lorem....</div>
</div>

CSS

.parent{
  display: flex;
  align-items: center;
}

.child{
  width: 200px;
}

align-content

flexアイテムが複数行になった時の上下の位置揃えを指定します。

flex-wrapでwrapかwrap-reverseを指定して複数行にしないと、効果はありません。align-contentに指定できる値は以下の通りです。

値	説明
stretch	デフォルト。flexコンテナの高さいっぱいにflexアイテムを配置
flex-start	flexアイテムを上揃え
flex-end	flexアイテムを下揃え
center	flexアイテムを上下中央揃え
space-between	flexアイテムを等間隔に配置（最初と最後の要素はflexコンテナの端にくっつく）
space-between	flexアイテムを等間隔に配置(flexコンテナの端との間にもそれぞれ間隔が空く)

実際に使用するときは以下のように記述します。

HTML

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

CSS

.parent{
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  width: 500px;
  height: 100vh;
}

.child{
  width: 200px;
  height:200px;
}

flexアイテム（子要素）に設定可能なプロパティ

flexコンテナ（親要素）に設定可能なプロパティを見てきましたが、ここからは、子要素（flexアイテム）に設定可能なプロパティを見ていきます。

order

flexアイテムの並び順を指定します。

orderに指定できる値は以下の通りです。

値	説明
0	デフォルト。flexアイテムを左揃え
数値（マイナス値も含む）	order:0;の前か次に配置

実際に使用するときは以下のように記述します。

HTML

<div class="parent">
  <div class="child child-1">1</div>
  <div class="child child-2">2</div>
  <div class="child child-3">3</div>
</div>

CSS

.parent{
  display: flex;
}

.child{
  width: 200px;
  height:200px;
}

.child-1{
  order: 3;
}

flex-grow

親要素にスペースがあったら、そのスペースに対しどれだけflexアイテムを伸ばせるかの比率を指定します。

flex-growに指定できる値は以下の通りです。

値	説明
0	デフォルト
数値（マイナス値は含まない）	伸びる比率を指定

実際に使用するときは以下のように記述します。

HTML

<div class="parent">
  <div class="child child-1">1</div>
  <div class="child child-2">2</div>
  <div class="child child-3">3</div>
</div>

CSS

.parent{
  display: flex;
  width: 1000px;
}

.child{
  width: 200px;
  height:200px;
}

.child-1{
  flex-grow: 2;
}

flex-shrink

flex-growとは反対に、親要素にスペースがないと、そのスペースに対しどれだけアイテムの幅を縮められるかの比率を指定します。

flex-wrap:nowrapと同時に使用しないと効果がありません（アイテムを複数行にしないため）。flex-shrinkに指定できる値は以下の通りです。

値	説明
1	デフォルト
数値（マイナス値は含まない）	縮む比率を指定

実際に使用するときは以下のように記述します。

CSS

.parent{
  display: flex;
  width: 400px;
}

.child{
  width: 200px;
  height:200px;
}

.child-1{
  flex-shrink: 2;
}

flex-basis

アイテムの幅や高さを指定します。

flex-directionがrowかrow-reverseのときは横幅、columnかcolumn-reverseのときは縦幅を指定します。flex-basisに指定できる値は以下の通りです。

値	説明
auto	デフォルト
数値	pxや%などで幅や高さを指定

実際に使用するときは以下のように記述します。

HTML

<div class="parent">
  <div class="child child-1">1</div>
  <div class="child child-2">2</div>
  <div class="child child-3">3</div>
</div>

CSS

.parent{
  display: flex;
}

.child{
  width: 200px;
  height:200px;
}

.child-1{
  flex-basis: 500px;
}

flex

flex-grow、flex-shrink、flex-basisのショートハンドです。flex-directionがrowかrow-reverseのときは横幅、columnかcolumn-reverseのときは縦幅を指定します。

flex-basisに指定できる値は以下の通りです。child-1のアイテムを幅500pxにし、それでも余白があれば、child-1のアイテムが余白を埋めます。

値	説明
0 1 auto	デフォルト

実際に使用するときは以下のように記述します。

HTML

<div class="parent">
  <div class="child child-1">1</div>
  <div class="child child-2">2</div>
  <div class="child child-3">3</div>
</div>

CSS

.parent{
  display: flex;
  width: 1000px;
}

.child{
  width: 200px;
  height:200px;
}

.child-1{
  flex: 2 0 500px;
}

align-self

flexコンテナに指定するalign-itemsと同じで、上下の位置揃えを指定します。

値は、align-itemsより、こちらの方が優先されます。align-selfに指定できる値は以下の通りです。

値	説明
auto	デフォルト。flexコンテナのalign-itemsの値を継承
stretch	flexコンテナの高さいっぱいにflexアイテムを配置
flex-start	flexアイテムを上揃え
flex-end	flexアイテムを下揃え
center	flexアイテムを上下中央揃え

実際に使用するときは以下のように記述します。

HTML

<div class="parent">
  <div class="child child-1">Lorem</div>
  <div class="child child-2">Lorem................</div>
  <div class="child child-3">Lorem....</div>
</div>

CSS

.parent{
  display: flex;
}

.child{
  width: 200px;
}

.child-1{
  align-self: center;
}

もう一つ使用例を見ます。下記の場合、flexコンテナで中央揃えに指定していますが、child-1にのみ、align-selfでflex-endを指定しているので、下で揃っています。

child-3は、align-selfを指定しておらず、デフォルトの状態なので、flexコンテナで指定した値が継承され、中央揃えになっています。

HTML

<div class="parent">
  <div class="child child-1">Lorem</div>
  <div class="child child-2">Lorem................</div>
  <div class="child child-3">Lorem....</div>
</div>

CSS

.parent{
  display: flex;
  align-items: center;
}

.child{
  width: 200px;
}

.child-1{
  align-self: flex-end;
}

まとめ

この記事に書かれていることで、特に覚えておいて欲しいことは以下の2点です。

記事が長いので「うっ・・・」と思ってしまう人もいるかもしれませんが、ここに書いてあること全てを一気に覚えなくても問題ありません。使っている内に慣れますし、よく使うプロパティは限られているのでいつの間にか覚えるようになりますのでご安心を。

CSS関係の記事は他にも書いているので、宜しければそちらもチェックしてみてください。