CSSのFlexboxとは？よく見る使い方も紹介

Flexboxとは？

CSSでレイアウトをする時によく使うFlexbox（Flexible Box Layout Moduleの略らしいです・・。）の大枠をうっすらと解説します。

下記のリンクに、シンプルなHTMLとCSSを用意したので、ご覧下さい。

シンプルなHTMLとCSSのサンプルを見る

Flexboxを使わない場合、3つのアイテム（赤・緑・青）は、縦方向に3段で並ぶ形になります。

サンプルを見た方は、「早く横並びにしたい！」という衝動に駆られていることだと思います。

親要素にdisplay: flex;で子要素が横並び

これが、Flexboxの最も基本的な使い方です。

Flexboxの最も基本的な使い方のサンプルを見る

.container {
  display: flex; /* display: flex;を追加 */
  ...
  ...
  ...
}

1行で子要素を横並びにしてくれるいいヤツです。

Flexboxには、他にも多くのプロパティが存在し、それを応用することで簡単にレイアウトを操作することができます。

Flexboxで作ってみるコーナー

ここからは、実際によく見るレイアウトを例にして、Flexboxの実用的な使い方をいくつか紹介します。

Flexboxの実用的な使い方のサンプルを見る

※ポイントを分かりやすくするために、あえて装飾を最低限にしてあります。

ロゴとメニューが並んだヘッダー

.bar {
  display: flex;
  align-items: center; /* 縦方向の位置を指定 */
  justify-content: space-between; /* 横方向の位置を指定 */
  ...
  ...
}

align-itemsとjustify-contentは、子要素の位置関係などを指定できるプロパティです。

よく使う値と挙動は、以下を参考にして下さい。

.align-items {
  align-items: normal; /* 初期値 */
  align-items: stretch; /* 子要素の高さを揃える */
  align-items: start; /* 先頭に配置 */
  align-items: end; /* 末尾に配置 */
  align-items: flex-start; /* コンテナ内の先頭に配置 */
  align-items: flex-end; /* コンテナ内の末尾に配置 */
  align-items: center; /* 真ん中 */
  align-items: baseline; /* ベースラインに揃える */
}

.justify-content {
  justify-content: flex-start; /* 初期値 左揃え */
  justify-content: flex-end; /* 右揃え */
  justify-content: space-between; /* コンテナの両端にスペースなしの均など割り付け */
  justify-content: space-around; /* コンテナの両端にもスペースありの均など割り付け */
  justify-content: center; /* 真ん中 */
}

それぞれCode Penなどで動きを実感すると、理解が早いと思います。

ど真ん中ドンと横並び解除

Flexboxを使い、コンテナの中央に子要素を配置する方法です。

align-items: center;とjustify-content: center;を併せて使うことで、子要素をど真ん中にドンすることができます。

画面いっぱいの高さのセクションやキービジュアルなどでよく使われています。

また、flex-directionの値によって、横並びを解除したり、子要素の並び順を逆にしたりできます。

flex-directionの値と挙動の参考は以下です。

.flex-direction {
  flex-direction: row; /* 初期値 横並び */
  flex-direction: row-reverse; /* 最後尾のアイテムから先頭に向けて逆に横並び */
  flex-direction: column; /* 子要素を縦に並べる */
  flex-direction: column-reverse; /* row-reverseと同じ要領で、逆順で縦に並べる */
}

子要素の並び順を操作できるrow-reverseとcolumn-reverseは、サイドバーをスマホサイズでメインコンテンツの下に持っていきたい時などに使われることが多いです。

また、row-reverseやcolumn-reverseを使うと、HTML上の構造と視覚的な情報（実際に表示されるコンテンツ）に矛盾が生じるため、アクセシビリティを考慮する場合は、スクリーンリーダーの読み上げ順序などに注意が必要です。

gapの使い方

サンプルにもちょこちょこ出てきているgap: 値 値;ですが、当サイトでも使用率の高いプロパティで、子要素間の余白を調整しています。

marginやpaddingみたいに、縦と横の余白をショートハンドで記述できます。

まだ、marginやpaddingを使って余白を作る方法が一般的だとは思いますが、シンプルな記述で余白を管理・統一できるので最近よく使ってます。

当サイトは、初心者向けの記事が多いのであれですが、「我、極めし者なり」っていう方がいらっしゃいましたら、それぞれのベストプラティクスなんかも伺ってみたい今日この頃です。