Flexbox プロパティ まとめ

Flexboxって様々なことができるのに全て覚えている人って少ないのではないでしょうか？
そこでFlexboxのプロパティをまとめてみました。

Flexboxの使い方

まずはFlexboxの使い方から
よく使う横並びの方法

flexbox.html

<div class="container">
  <div class="item">子要素 1</div>
  <div class="item">子要素 2</div>
  <div class="item">子要素 3</div>
</div>

親要素にあたるcontainerにdisplya: flexbox;を指定してあげるだけです。

flexbox.css

.container {
  display: flex;
}

これで子要素が横並びになるはずです。

Flexboxのプロパティ一覧

Flexboxには親要素にかけれるものと子要素にかけれるものの２種類あります。
まずは親要素にかけれるプロパティから。

親要素に指定するプロパティ

プロパティ	効果	使える値
flex-direction	子要素の並ぶ向きを指定することができる	row（初期値） : 子要素を左から右に配置 row-reverse : 子要素を右から左に配置 column : 子要素を上から下に配置 column-reverse : 子要素を下から上に配置
flex-wrap	子要素の折り返しを指定することができる	nowrap（初期値） : 子要素を折り返しせず、一行に並べる wrap : 子要素を折り返し、複数行に上から下へ並べる wrap-reverse : 子要素を折り返し、複数行に下から上へ並べる
flex-flow	flex-directionと、flex-wrapをまとめて指定することができる(ショートハンド・プロパティ )	-
justify-content	横並びの位置を指定することができる	flex-start（初期値） : 行の開始位置から配置。左揃え。 flex-end : 行末から配置。右揃え。 center : 中央揃え space-between : 最初と最後の子要素を両端に配置し、残りの要素は均等に間隔をあけて配置 space-around : 両端の子要素も含め、均等に間隔をあけて配置
align-items	縦並びの位置を指定することができる	stretch（初期値） : 親要素の高さ、またはコンテンツの一番多い子要素の高さに合わせて広げて配置 flex-start : 親要素の開始位置から配置。上揃え。 flex-end : 親要素の終点から配置。下揃え。 center : 中央揃え baseline : ベースラインで揃える
align-content	複数行になった時に縦並びの位置を指定することができる	stretch（初期値） : 親要素の高さに合わせて広げて配置 flex-start : 親要素の開始位置から配置。上揃え。 flex-end : 親要素の終点から配置。下揃え。 center : 中央揃え space-between : 最初と最後の子要素を上下の端に配置し、残りの要素は均等に間隔をあけて配置 space-around : 上下端にある子要素も含め、均等に間隔をあけて配置

子要素に指定するプロパティ

プロパティ	効果	使える値
order	並び順を指定をすることができる	初期値は0。 マイナス値を含む数値のみ指定することができる
flex-grow	子要素が画面幅に満たない場合に伸びる比率を指定することができる	数値のみ指定することができる。 初期値は0。 マイナス値は無効
flex-shrink	子要素が画面幅より小さい場合に縮む比率を指定することができる	数値のみ指定することができる。 初期値は1。 マイナス値は無効
flex-basis	子要素の基準幅を指定することができる	パーセントやピクセル値で指定することができる 初期値はautoでautoと指定した場合は子要素のコンテンツのサイズが適応される。
flex	flex-growと、flex-shrink、flex-basisをまとめて指定できる(ショートハンド・プロパティ)	-
align-self	子要素の縦方向を指定することができる	auto（初期値） : 親要素の align-items の値を継承 stretch : 親要素の高さ、またはコンテンツの一番多い子要素の高さに合わせて広げて配置 flex-start : 親要素の開始位置から配置。上揃え flex-end : 親要素の終点から配置。下揃え。 center : 中央揃え baseline : ベースラインで揃える

共に働くWebエンジニアを募集しています!

不動産SHOPナカジツでは自社サービスを作っていく仲間を募集しています。
詳しくはWantedlyからお問い合わせください。