
Photo by
peishum
Flex-containerのプロパティについて
flex-directionプロパティ
flex-direction(ディレクション)とは、主軸の方向を指定できる
値
・row(ロー):主軸は左から右へ
・row-reverse:主軸が右から左へ
・column(カラム):主軸と較差軸が変わり、上から下へ
・column-reverse:主軸が下から上へ
justify-contentプロパティ
justify-content(ジャスティファイ コンテント)とは、主軸に沿って要素をどう揃えるか指定できる。
値
・flex-start:左揃え
・flex-end:右揃え
・center:中央揃え
・space-between(スペース ビットウェン):要素の間に余白
align-itemsプロパティ
align-items(アライン アイテムズ)とは、較差軸に沿ってどう要素を揃えるのか指定できる。
値
・flex-start:上揃え
・flex-end:下揃え
・center:中央揃え
flex-wrapプロパティ
flex-wrap(ラップ)とは、並べたい要素の幅がコンテナの幅を超える場合に指定するプロパティ。
値
・nowrap(ノウラップ):折り返しなし、要素幅が縮んで収まる(初期値)
・wrap:はみ出し分を折り返す。主軸と較差軸の方向に並ぶ。
・wrap-reverse:はみ出し分を折り返す。較差軸が反対方向に並ぶ。
align-contentプロパティ
align-contentとは、flex-wrapで折り返しを指定されており、較差軸方向に余裕がある場合は余白を指定できる。
値
・flex-start:上揃え
・flex-end:下揃え
・center:中央揃え
・space-between(スペース ビットウェン):要素の間に余白
*Flexboxを調べている時に、チートシートを見つけました。
これは、参考にするべきです!!