Flexbox プロパティ まとめ

5750 ワード
CSS flexbox CSS3 CSS テキストリンク

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からお問い合わせください。