Blog Article

CSSのFlexboxの仕組みを深く理解して使いこなそう！

2023年09月30日

こんにちは、Mochiです。

Webデザインにおいて、柔軟なレイアウトの構築は重要です。要素を柔軟に配置し、レスポンシブデザインを実現するための方法の1つがFlexboxです。

Flexboxって何？Flexboxで横並びとか縦並びってどうやってやるんだっけ？🤔
そんな方に向けて、Flexboxの仕組みとその使い方をわかりやすく解説します。

この記事を読むことで、Flexboxの仕組みを深く理解し、使いこなして、柔軟なレイアウトを作れるようになります。それはもう、縦横無尽にレイアウトできちゃいます。

では、まずFlexboxとは何なのか、その仕組みから学びましょう。

🤔Flexboxとは

Flexbox（Flexible Box Layout）は、CSS3で導入されたレイアウトモデルで、柔軟な配置をするための強力なツールです。Flexboxは、特に1次元の直線的なレイアウトを構築するのに便利です。

Flexboxの仕組みは次のようになります。

主に4つの構成要素があります。

Flexコンテナ: Flexboxにおける親要素です。入れ物となる箱のような役割があります。
Flexアイテム: Flexコンテナの中に含まれる小要素のことです。
メイン軸: コンテナの要素を配置するためのメインの軸（方向を決めるもの）です。この軸に沿って、Flexアイテムが配置されます。この軸の方向はのちに説明するflex-directionプロパティで指定できます。
クロス軸: メイン軸に直行する軸です。直行方向にFlexアイテムを配置する時に使います。

これらの仕組みを理解できたところで、次はFlexboxの利用方法を見ていきましょう！

✍️Flexboxの始め方

display: flex

Flexboxを有効にするために、display: flex;を使います。これはFlexコンテナにしたい要素へ指定します。

.flex-container {
  display: flex;
}

指定すると次のように、Flexboxのレイアウトが適用されます。

インライン要素にFlexboxを使う場合は、次のようにinline-flexを指定します。

.flex-container {
  display: inline-flex;
}

では、Flexboxを使い始められるようになったところで、次はFlexコンテナの操作を学んでいきましょう。

📦Flexコンテナの使い方

justify-content

justify-contentプロパティは、メイン軸に沿ってFlexアイテムの揃える位置を調整できます。

値は次のものがあります。

flex-start: 開始位置に配置（デフォルト）
flex-end: 終了位置に配置
center: 中央に配置（中央揃え）
space-between: 両端のFlexアイテムを端に配置し、他のアイテム間を均等に配置
space-around: 均等に配置

例えば次のように使います。

.flex-container {
  display: flex;
  justify-content: center;
}

align-items

align-itemsプロパティは、クロス軸に沿ってFlexアイテムの揃える位置を調整できます。

値は次のものがあります。

stretch: Flexコンテナいっぱいに伸ばす（デフォルト）
flex-start: 開始位置に配置
flex-end: 終了位置に配置
center: 中央に配置（中央揃え）
baseline: ベースラインで揃える

例えば次のように使います。

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

gap, row-gap, column-gap

gapプロパティは、Flexアイテムの間の余白を調整できます。またrow-gapプロパティは行（横）方向の余白のみを調整でき、column-gapプロパティは列（縦）方向の余白のみを調整できます。

例えば次のように使います。

.flex-container {
  display: flex;
  gap: 10px;
}

flex-direction

flex-directionプロパティは、メイン軸の方向を選択して、Flexアイテムの配置方向を決められます。

値は次のものがあります。

row: 左から右に配置（デフォルト）
row-reverse: 右から左に配置
column: 上から下に配置
column-reverse: 下から上に配置

例えば次のように使います。

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

flex-wrap

flex-wrap プロパティは、Flexアイテムがコンテナに収まらない場合に、折り返して複数行にするかを設定します。

値は次のものがあります。

nowrap: アイテムを折り返さず、1行にする（デフォルト）
wrap: アイテムをクロス軸の方向に折り返す
wrap-reverse: アイテムをクロス軸の逆方向に折り返す

例えば次のように使います。

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

flex-flow

flex-flow プロパティは、flex-direction と flex-wrap を同時に設定します。
指定の順番はflex-flow: flex-direction flex-wrap;となります。

例えば次のように使います。

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

align-content

align-content プロパティは、折り返して複数行にした場合に、クロス軸に沿ってFlexアイテムの揃える位置を調整できます。折り返しのない一行（wrap: nowrap)の時は適用されません。

値は次のものがあります。

stretch: Flexコンテナいっぱいに伸ばす（デフォルト）
flex-start: 開始位置に配置
flex-end: 終了位置に配置
center: 中央に配置（中央揃え）
space-between: 両端のFlexアイテムを端に配置し、他のアイテム間を均等に配置
space-around: 均等に配置

例えば次のように使います。

.flex-container {
  display: flex;
  align-content: center;
}

💍Flexアイテムの使い方

続いて、Flexアイテムの操作方法を学んでいきます。

align-self

align-self プロパティは、指定したFlexアイテムに対して、クロス軸に沿った位置を調整できます。

align-items プロパティとは異なり、個別のアイテムに適用されます。またalign-selfで指定した値は、align-items で指定した値より優先されます。

値は次のものがあります。

auto: Flexコンテナで指定したalign-itemsの値を継承する（デフォルト）
stretch: Flexコンテナいっぱいに伸ばす
flex-start: 開始位置に配置
flex-end: 終了位置に配置
center: 中央に配置（中央揃え）
baseline: ベースラインで揃える

例えば次のように使います。

.flex-item {
  align-self: flex-start;
}

order

order プロパティは、指定したFlexアイテムに対して、順序を調整できます。

デフォルトは0です。より小さい数値がメイン軸の開始位置へ、より大きい数値がメイン軸の終了位置へ移動します。また、マイナスの数値を使うこともできます。

例えば次のように使います。

.flex-item {
  order: -1;
}

flex-grow

flex-grow プロパティは、Flexアイテムのメイン軸方向への伸びを調整できます。

値は数値で、次のような動作をします。

0: Flexコンテナに合わせて伸びない（デフォルト）
1: Flexコンテナに合わせて伸びる
2以上: 1を基準として指定した比率まで伸びる（2の場合は2倍伸びる）

例えば次のように使います。

.flex-item {
  flex-grow: 2;
}

flex-shrink

flex-shrink プロパティは、Flexアイテムのメイン軸方向への縮みを調整できます。

値は数値で、次のような動作をします。

0: 縮まず、Flexコンテナの中に収めない
1: Flexコンテナの中に入るように縮む（デフォルト）
2以上: 1を基準として指定した比率まで縮む（2の場合は2倍縮む）

例えば次のように使います。

.flex-item {
  flex-shrink: 0;
}

flex-basis

flex-basis プロパティは、Flexアイテムのメイン軸方向への基準となる大きさを設定できます。

注意点として、Flexアイテムが指定した大きさより小さい場合は、指定した大きさまで伸びます。逆に大きい場合は、大きさは変わりません。つまり、無理やり小さくはならないです。また、gapは指定した大きさに含まれます。
値は数値で、次のような動作をします。

auto: Flexアイテム自体の大きさになる（デフォルト）
200px: Flexアイテムの大きさが200pxになる。
50%: Flexアイテムの大きさが50%になる。

基本的には幅(widht)や高さ(height)のプロパティと同じ仕組みです。これらについて不安な方は記事「CSSで幅（width）と高さ（height）を指定する方法」を読むのがおすすめです。

flex

flex プロパティは、これまでに説明したflex-grow, flex-shrink, flex-basis を同時に指定できます。
順番はflex: flex-grow, flex-shrink, flex-basis;です。

例えば次のように使います。

.flex-item {
  flex: 0 1 auto; /* デフォルト */
}

💪Flexboxの応用パターン

入れ子にする

Flexboxは入れ子することもできます。親コンテナと子コンテナの両方にFlexboxを適用することで、複雑なレイアウトを簡単に構築できます。

例えば、次のように使います。

.parent-container {
  display: flex;
  flex-direction: row;
}

.child-container {
  display: flex;
  flex-direction: column;
}

🚨Flexboxの注意点

Flexboxを使う上でいくつか注意点があります。

まず、Flexboxのプロパティは親要素に空きスペースがある場合に適用されるものが多いため、空きスペースがないとうまく反映されません。余白があるかを確認してみましょう。

次に、マージンが入っているとうまく揃わない場合があります。自分が意図した位置にならないときは、マージンを疑ってみましょう。

そして、古いブラウザではサポートが不完全な場合があります。必要に応じて、ブラウザのアップデートなどを行いましょう。

🎉まとめ

Flexboxの仕組みとその使い方について解説しました。

皆さんはこの記事を読んだことで、Flexboxの仕組みを深く理解し、使いこなして、柔軟なレイアウトを作れるようになりました。素晴らしい成長です！👏

Flexboxは、Webデザインにおいて柔軟なレイアウトを実現するための強力なツールです。こので学んだことを活かして、ぜひ魅力的なレイアウトを組んでみましょう。