flexboxのalign-contentとorderについて

こんにちは！アンドエイチエーのコーディング部です。

本記事では、flexboxのalign-contentとorderについてご紹介します。

flexboxの「align-content」について

flexboxのalign-contentは、flexアイテムを折り返したときに上下の配置や余白を指定するプロパティです。

align-contentプロパティで使用できる主な値は以下のとおりです。

• stretch：規定値、flexアイテムが親要素の幅に合わせて伸縮
• flex-start： flexアイテムの上揃え
• flex-end： flexアイテムの下揃え
• center： flexアイテムの上下中央揃え
• space-between： 上下の両端揃え
• space-around： flexアイテムの上下に均等な余白をとる
• space-evenly： 均等な余白をとる

以下、align-contentの値について詳しく見ていきます。

stretch (規定値)

align-content: stretch;

こちらは規定値のため、特に指定しない場合はこの値が自動で設定されます。そのため、指定してもしなくても表示に変わりはありません。
すべてのアイテムが主軸の幅に合わせて伸縮して表示されます。

See the Pen align-content: stretch by ha-01 (@hasamplecom) on CodePen.

flex-start

align-content: flex-start;

アイテムを上寄せで配置します。

See the Pen align-content: flex-start by ha-01 (@hasamplecom) on CodePen.

flex-end

align-content: flex-end;

アイテムを下寄せで配置します。

See the Pen align-content: flex-end by ha-01 (@hasamplecom) on CodePen.

center

align-content: center;

アイテムを中央寄せで配置します。

See the Pen align-content: center by ha-01 (@hasamplecom) on CodePen.

space-between

align-content: space-between;

アイテムを両端揃えで配置します。

See the Pen align-content: space-between by ha-01 (@hasamplecom) on CodePen.

space-around

align-content: space-around;

それぞれのアイテムを左右端の余白を含めて均等な間隔で配置します。

See the Pen align-content: space-around by ha-01 (@hasamplecom) on CodePen.

space-evenly

align-content: space-evenly;

全てのアイテムが主軸方向に均等に配置されます。各アイテムの周りに同じサイズの間隔が付きます。

See the Pen align-content: space-evenly by ha-01 (@hasamplecom) on CodePen.

flexboxの「order」について

flexboxのorderとは、flexアイテムの順番を指定するプロパティです。

規定値には「0」が設定されています。数値が小さいものから順に配置されます。また、-2のような負の値も指定できます。

以下、orderの値について詳しく見ていきます。

0 (規定値)

order: 0;

アイテムが順番通りに表示されます。

See the Pen 0 by ha-01 (@hasamplecom) on CodePen.

整数値

order: -1;、order: 1;

0、正の整数、負の整数を指定します。

See the Pen order by ha-01 (@hasamplecom) on CodePen.

参考にしたいサイト・おすすめ記事

align-contentとorderについての公式サイト

align-contentとorderについて詳しくは、以下MDNサイトの記事を参考にするのがおすすめです。
align-content - CSS: カスケーディングスタイルシート | MDN
order - CSS: カスケーディングスタイルシート | MDN

flexboxプロパティについてのもっと知りたい方へ

これまで複数の記事に渡り、本記事以外のflexboxプロパティについてご紹介しています。こちらもぜひご覧ください！

flexboxの概要と「flex-direction」について

https://and-ha.com/coding/flexbox-and-flexdirection/

flexboxの「flex-wrap」と「flex-flow」について

https://and-ha.com/coding/flex-wrap-and-flex-flow/

flexboxの「justify-content」と「align-items」について

https://and-ha.com/coding/justify-content-align-items/

最後に

いかがでしたか?
align-content、orderの構造を理解するとよりレイアウトを組みやすくなります。どんどん使いこなしてみましょう！