初心者向け！Flexboxを分かりやすく解説します

Flexboxは横並びレイアウトが簡単に実装できる他、その他様々な配置を可能にする便利なプロパティです。

ぱっと見ると難しく感じるかもしれませんが、一度覚えれば今後もずっと使えるものなので、できるだけ分かりやすくご紹介していきたいと思います。

Flexboxとは？

CSS3から使用可能になったもので、floatやinline-boxに比べて使い勝手が良く、簡単なコードで思い通りの配置になります。

また、親子の関係さえ理解していれば他の要素と干渉しないので、その部分だけのことを考えてレイアウトを組めることが大きなメリットだと言えるでしょう。

Flexboxの基本の考え方

親要素（コンテナ）の中に子要素（アイテム）を入れ、それぞれにCSSを設定していくというのが基本的な考え方になります。

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.container{
  display:-webkit-box; // その他色々用のベンダープレフィックス
  display:-ms-flexbox; // IE用のベンダープレフィックス
  display: flex;
}

これだけで横並びのレイアウトを作成することができます！

親要素へCSSを指定するだけで、簡単に横並びにすることができます！

対応ブラウザについて

Can I use…というサイトで確認することができます。（Flexboxに関してはこちらから）

赤色が非対応ブラウザ、緑色が対応ブラウザです。各数字はブラウザのバージョンを表しています。

上記サイトを見ると分かるのですが、IEとOperaの古いブラウザではFlexboxが適用されず、レイアウトが崩れてしまいます。また最新版のIEでも表示がおかしくなることがあるようですので、そのあたりを考慮しなければいけない場合は要注意です。

色々なオプションが設定できます

flex-boxは横に並べるだけじゃなく、色々なオプション設定をつけることができます！

display: flex;を指定したあと、追加する形で使ってくださいね。

flex-direction（子要素の並ぶ向き）

flex-directionは子要素の向きを指定するプロパティです。横方向、または縦方向に指定することができます。

row（左から右）

.container {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

水平方向に左から右へ子要素を配置するプロパティです。rowは初期値なので、特に何も指定しなくてもこの形になります。

row-reverse（右から左）

.container {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

水平方向に右から左へ子要素を配置するプロパティです。rowとは逆向きの配置です。

column（上から下）

.container {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

垂直方向に上から下へ子要素を配置するプロパティです。レスポンシブ対応のページを作る時に活躍します。

column-reverse（上から下）

.container {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
}

垂直方向に下から上へ子要素を配置するプロパティです。columnとは逆向きの配置です。

flex-wrap（子要素の折り返し）

flex-wrapは子要素の向きを指定するプロパティです。一行で表示するか、複数行で表示するかを指定することができます。

no-wrap（一行に並べる）

.container {
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

初期値です。子要素を折り返さず、一行で表示します。各子要素の幅が指定されていない場合、親要素の幅に収まるように縮小されます。

wrap（複数行に並べる）

.container {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

子要素を折り返し、複数行で表示します。方向は左から右、上から下です。

wrap-reverse（複数行に並べる/下から上）

.container {
  -ms-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}

子要素を折り返し、複数行で表示します。左から右の順序は同じですが、下から上へ子要素が配置されます。

justify-content（水平方向の配置）

先ほどのwrapとは違って親要素に空きスペースがある場合に使用できるプロパティです。水平方向のどの位置に子要素を配置するかを指定することができます。

flex-start（親要素の左に配置）

.container {
  webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

初期値です。親要素の左（行の開始位置）から子要素が並びます。

flex-end（親要素の右に配置）

.container {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

親要素の右（行末）に合わせて配置されます。

MicrosoftWordの右揃えをイメージすると分かりやすいです！

center（中央揃え）

.container {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

親要素の中心に子要素を配置します。

space-between（等間隔配置/幅いっぱい）

.container {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

最初と最後の子要素を両端に配置し、残りの子要素を等間隔で配置します。余白なしに横一杯に広がります。

余白の設定がなくてもOK！親要素の幅さえ指定すれば均等に配置してくれますので、細かな調整をしたいとき以外はpaddingやmarginは必要ありません。

space-around（等間隔配置/余白あり）

.container {
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

両端の子要素も含め、全ての子要素を均等に配置します。

垂直方向の配置（align-items）

垂直方向のどの位置に、子要素を配置するかを指定することができます。

stretch（子要素が伸びる）

.container {
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

初期値です。子要素の高さを指定していない場合、親要素に合わせて自動的に最大まで伸びます。

flex-start（親要素の上で揃える）

.container {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

親要素の上部に合わせて配置されます。

flex-end（親要素の下で揃える）

.container {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

親要素の下部に配置されます。

center（上下中央揃え）

.container {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

親要素の中心と子要素の中心を合わせるように配置されます。

少ない記述で簡単に上下中央揃えすることができるので、使う場面は多いです。

align-content（複数行の垂直方向の配置）

子要素が複数行の場合、垂直方向のどの位置に子要素を配置するか指定することができます。

複数行の子要素の位置を指定するプロパティのため、折り返しのプロパティであるflex-wrap: wrap;を指定しないと適用されません！

stretch（子要素が伸びる）

.container {
  -ms-flex-line-pack: stretch;
  align-content: stretch;
}

初期値です。子要素の高さが指定されていない場合は、均等になるように子要素の高さが伸びます。

flex-start（親要素の上部に配置）

.container {
  -ms-flex-line-pack: start;
  align-content: flex-start;
}

親要素の上部に合わせて子要素が並びます。

flex-end（親要素の下で揃える）

.container {
  -ms-flex-line-pack: end;
  align-content: flex-end;
}

親要素の下部に配置されます。

center（上下中央揃え）

.container {
  -ms-flex-line-pack: center;
  align-content: center;
}

親要素の中心と子要素の中心を合わせるように配置されます。

space-between（等間隔配置/高さいっぱい）

.container {
  -ms-flex-line-pack: justify;
  align-content: space-between;
}

最初と最後の子要素を余白なしで上下に配置し、残りの子要素を等間隔で配置します。縦一杯に広がります。

space-around（等間隔配置/余白あり）

.container {
  -ms-flex-line-pack: distribute;
  align-content: space-around;
}

最上・最下の子要素も含め、全ての子要素を均等に配置します。

さいごに

いかがでしたでしょうか。少しコツはいりますが、慣れてしまえば様々なレイアウトを表現できるようになります！ぜひFlexboxを使いこなしてください！