flexboxのalign-contentとorderについて
公開日 :
- コーディング
こんにちは！AndHAコーディング部です。
本記事では、flexboxのalign-contentとorderについてご紹介します。
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の構造を理解するとよりレイアウトを組みやすくなります。
どんどん使いこなしてみましょう!
