CSS floatを使わないレイアウト「Flexbox」について5~交差軸の配置方法を指定する~

前回の記事で、主軸に沿ってどのように並べるかを指定する justify-content プロパティを紹介しました。今回は交差軸の配置を指定するプロパティを2つ紹介します。

  • align-items:交差軸のどの位置に並べるか
  • align-content:Flexアイテムを折り返す設定のとき、交差軸に沿ってどのように並べるか

align-items:交差軸のどの位置に並べるか

Flexコンテナーの交差軸方向に余白ができる場合、アイテムを交差軸のどの位置に並べるか指定するプロパティです。複数行の場合も適用されますが、align-content が stretch 以外で指定されているときは、align-content の見た目のみ反映されます。

指定する場所:flexコンテナー

align-itemsの値
意味 左から右へ並べた時の見た目
stretch アイテムの長さがcross-axisに沿ってFlexコンテナー一杯に広がる(初期値) アイテムの高さがFlexコンテナー一杯に広がる
flex-start cross-start(交差軸の始点)側に詰める 上詰め
flex-end cross-end(交差軸の終点)側に詰める 下詰め
center 中央に配置 上下中央配置
baseline 文字のベースラインが一直線になるように配置する ベースラインが横一直線に揃う

align-itemsイメージ

align-content:交差軸に沿ってどのように並べるか(複数行の場合)

アイテムが折り返される設定(flex-wrap が wrap か wrap-reverse)のときにアイテムを交差軸に沿ってどのように並べるかを指定します。flex-wrap が nowrap の時は無効です。上詰め、下詰め、上下中央配置、上下均等配置などができます。

指定する場所:flexコンテナー

align-contentの値
意味 左から右へ並べた時の見た目
stretch アイテムの長さがcross-axisに沿ってFlexコンテナーの余白を埋めるように広がる(アイテムの長さはすべての行で同じになる)(初期値) アイテムの高さがFlexコンテナーの余白を埋めるように広がる(アイテムの長さはすべての行で同じになる)
flex-start cross-start(交差軸の始点)側に全体を詰める 上詰め
flex-end cross-end(交差軸の終点)側に詰める 下詰め
center 中央に配置 上下中央配置
space-between Flexアイテムを均等配置する
(最初のアイテムをcross-startに、最後のアイテムをcross-endに配置)
均等配置(上下にスペースなし)
space-around Flexアイテムを均等配置する
(アイテムの周囲に均等にスペースをとる)
均等配置(上下にスペースあり)

align-contentイメージ

使い分け

交差軸(cross-axis)方向の配置方法を指定するプロパティを2つ紹介しましたが、効果が似ていて使い分けに迷うかもしれません。しかし、align-content の方は複数行の時しか反映されないので、1行の時は align-items 、複数行の場合は align-content を使えば大丈夫です。

参考サイト

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>