flexboxのalign-contentとorderについて | 仙台を代表するホームページ制作会社|AndHA(アンドエイチエー)

flexboxのalign-contentとorderについて

公開日 :

  • コーディング
img

こんにちは!AndHAコーディング部です。

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

align-content

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

align-content で使用するおもな値は以下のとおりです。

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

以下詳しく見ていきます。

stretch (既定値)

すべてのアイテムが主軸の幅に合わせて伸縮して表示されます。
以下のような表示になります。

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

flex-start

アイテムを上寄せで配置します。
以下のような表示になります。

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

flex-end

アイテムを下寄せで配置します。
以下のような表示になります。

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

enter

アイテムを中央寄せで配置します。
以下のような表示になります。

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

space-between

アイテムを両端揃えで配置します。
以下のような表示になります。

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

space-around

それぞれのアイテムを左右端の余白を含めて均等な間隔で配置します。
以下のような表示になります。

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

space-evenly

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

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

order

flexアイテムの順番を指定します。

0(既定値)

アイテムが順番通りに表示されます。
以下のような表示になります。

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

整数値

0、正の整数、負の整数を指定します。
以下のような表示になります。

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

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

公式サイト

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

おすすめのflexboxプロパティについての記事

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

Flexboxとflex-directionについて
flex-wrap、flex-flowについて
justify-content、align-itemsについて

最後に

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

この記事をシェア

  • Twitter
  • Facebook
  • hatena-bookmark

合わせて読みたい