【CSS】Flexで使用出来る全てのプロパティについて一覧で解説します！
こんにちは！
web系エンジニアを目指して学習中のsiと申します^ ^
この記事の対象者
- Flexってなに？って方
- Flexの全てのプロパティを確認したい方
- Flexの各プロパティの使い方を知りたい方
目次
Flexとは
Flexとは正式名称を「Flexible Box Layout Module」と言う、レイアウトモジュールのことです。
Flexを使うことで、要素を横並びや縦並びにすることが出来て、簡単にレイアウトを組むことが出来ます。
また、Flexを使うためには親要素に対してdisplay: flex;を指定する必要があります。
display: flex;を指定した親要素のことをコンテナと呼び、中の子要素のことをアイテムと呼びます。
Flexが出る前はfloatがよく使われていました。また、Gridと呼ばれるレイアウトモジュールもFlexと並んでよく使用されています。
Flexでは親要素と子要素で指定出来るプロパティが異なります。
以下で、全てのプロパティについて解説しているので、さっそく見ていきましょー！
親要素(コンテナ)に指定できるプロパティ
flex-direction
アイテムを並べる向きを指定するプロパティ
row (デフォルト)
横方向に左から右へ配置されます
See the Pen
flex row by si (@s158)
on CodePen.
column
縦方向に上から下へ配置されます
See the Pen
Untitled by si (@s158)
on CodePen.
row-reverse
横方向に右から左へ配置されます
See the Pen
flex row-reverse by si (@s158)
on CodePen.
column-reverse
縦方向に下から上へ配置されます
See the Pen
flex column-reverse by si (@s158)
on CodePen.
flex-wrap
アイテムの折り返しを指定するプロパティ
wrap
上から下へ折り返します
See the Pen
flex row wrap by si (@s158)
on CodePen.
wrap-reverse
下から上へ折り返します
See the Pen
flex row reverse by si (@s158)
on CodePen.
flex-flow
flex-direction、flex-wrapの順番で一括指定できるショートハンド
See the Pen
Untitled by si (@s158)
on CodePen.
justify-content
横方向に対するアイテム位置を指定するプロパティ
flex-end
アイテムを右揃えで配置します
See the Pen
flex jusutify-content flex-end by si (@s158)
on CodePen.
center
アイテムを中央揃えで配置します
See the Pen
flex justify-content center by si (@s158)
on CodePen.
space-between
両橋のアイテムを余白を空けずに端に配置して、その他のアイテムを均等な間隔を空けて配置します
See the Pen
flex justify-content space-between by si (@s158)
on CodePen.
space-around
全てのアイテムを均等な間隔を空けて配置します
See the Pen
flex justify-content space-between by si (@s158)
on CodePen.
align-items
縦方向に対するアイテム位置を指定するプロパティ
stretch (デフォルト)
アイテムを上下いっぱいまで広げます
See the Pen
flex align-items stretch by si (@s158)
on CodePen.
flex-start
アイテムを上揃えで配置します
See the Pen
flex align-items flex-start by si (@s158)
on CodePen.
flex-end
アイテムを下揃えで配置します
See the Pen
flex align-items flex-end by si (@s158)
on CodePen.
center
アイテムを中央揃えで配置します
See the Pen
flex align-items center by si (@s158)
on CodePen.
baseline
アイテムをベースラインに揃えて配置します
See the Pen
flex align-items baseline by si (@s158)
on CodePen.
align-content
縦方向に対する複数行のアイテム位置を指定するプロパティ
stretch(デフォルト)
親要素の大きさに合わせて間隔を自動調整します
See the Pen
flex align-content by si (@s158)
on CodePen.
flex-start
アイテム行を上揃えで配置します
See the Pen
flex align-content flex-start by si (@s158)
on CodePen.
flex-end
アイテム行を下揃えで配置します
See the Pen
flex align-content flex-end by si (@s158)
on CodePen.
center
アイテム行を上下中央揃えで配置します
See the Pen
flex align-content flex-end by si (@s158)
on CodePen.
space-between
一番上と一番下のアイテム行が上下に余白を空けずに配置され、その他のアイテム行は均等な間隔を空けて配置される
See the Pen
Untitled by si (@s158)
on CodePen.
space-around
全てのアイテム行が均等な間隔を空けて配置されます
See the Pen
flex align-content space-around by si (@s158)
on CodePen.
子要素(アイテム)に指定できるプロパティ
order
HTMLの記述に関わらず、アイテムの並び順を指定できるプロパティ
See the Pen
flex order by si (@s158)
on CodePen.
align-self
アイテム１つ１つの縦方向の位置を指定するプロパティ
親要素にalign-itemsが指定されていて、子要素にalign-selfを指定している場合は、align-selfの値が優先されます。
See the Pen
flex align-self by si (@s158)
on CodePen.
flex-grow
親要素の残り幅をどの割合で分け与えるかを指定するプロパティ
See the Pen
flex flex-grow by si (@s158)
on CodePen.
「item1」には１、「item2」には2、「item3」には1を指定しているため、
1：2：1の割合で残り幅を分け与えています。
そのため、「item2」が他アイテムに比べて幅が大きくなっています。
flex-shrink
アイテム幅が親要素を超えたときに、どの割合で縮ませるかを指定するプロパティ
See the Pen
flex flex-shirink by si (@s158)
on CodePen.
「item1」には１、「item2」には2、「item3」には3を指定しているため、
1：2：3の割合で超えた幅分を縮ませています。
そのため、「item1」item2」「item3」の順番でアイテム幅が小さくなっています。
flex-basis
アイテムの幅を指定するプロパティ
基本的にはwidthと同じ働きをします。flex-basisとwidthを両方指定した場合は、flex-basisの値が優先されます。
See the Pen
flex flex-basis by si (@s158)
on CodePen.
flex
flex-grow、flex-shrink、flex-basisの順番で一括指定できるショートハンド
See the Pen
flex flex by si (@s158)
on CodePen.
まとめ
- Flexを使うことで簡単にレイアウトを組むことが出来る
- Flexでは親要素のことをコンテナ、子要素のことをアイテムと呼ぶ
- 親要素と子要素で使用出来るプロパティが異なる
- 様々なプロパティを駆使することで、柔軟なレイアウトを組むことが出来る
参考記事
- Flexboxの全プロパティと使い方
- flex-basisとは？widthとの違いや効かないときの対処を解説
- 【図解】Flexboxの基本的な使い方とプロパティ一覧
- CSSでよく見かける【flex:1】を分かりやすく解説
- 【CSS】align-contentの使い方、アイテムの縦方向の揃え位置を指定する!
- もう迷わない！CSS Flexboxの使い方を徹底解説
