Flexboxの基本

Flexboxの基本的な記述方法　 ∪ 　 ∪

HTMLで複数の子要素を親要素で囲い、CSSで親要素にFlexコンテナーを定義する。
親要素 { display: flex; }これだけでフレックスボックスが使えます

  Html
  <div class="flex-container">
    <div class="flex-item01">flex-item01</div>
    <div class="flex-item02">flex-item02</div>
    <div class="flex-item03">flex-item03</div>
    <div class="flex-item04">flex-item04</div>
  </div>
  
  Css
  .flex-container {
    display: -webkit-flex;
    display: flex;
  }

Flexboxコンテナーに指定するプロパティ　 ∩

flex-direction	[ 子要素の配置方向 ]
flex-wrap	[ 子要素を折り返し指定 ]
flex-flow	[ flex-directionとflex-wrapをまとめて指定 ]
justify-content	[ 水平方向の配置位置を指定 ]
align-items	[ 垂直方向の配置位置を指定 ]
align-content	[ 複数行にした時どの様に配置するかを指定 ]

□ flex-direction　 ∩

使える値
row（初期値）	[ 子要素が左から右に配置される ]
row-reverse	[ 子要素が右から左に配置される ]
column	[ 子要素が上から下に配置される ]
column-reverse	[ 子要素が下から上に配置される ]

  Css
  .flex-container {
    -webkit-flex-direction: row;
    flex-direction: row;
  } 

row

---

row-reverse

column

column-reverse

□ flex-wrap 　∩

使える値
nowrap	[ （初期値） 子要素を折り返さない ]
wrap	[ 子要素を折り返し、複数行に上から下へ配置する]
wrap-reverse	[ 子要素を折り返し、複数行に下から上へ配置する ]

  Css
  .flex-container {
   -webkit-flex-wrap: nowrap;
   flex-wrap: nowrap;  
  }

nowrap

wrap

wrap-reverse

□ flex-flow 　∩

flex-directionとflex-wrapをまとめて指定する

  Css
  .flex-container {
   -webkit-flex-flow: wrap-reverse row-reverse;
   flex-flow: wrap-reverse row-reverse;  
  }

□ justify-content　∩

水平方向のどの位置に配置するかを指定する

使える値
flex-start（初期値）	[ 行の開始位置から配置、左揃え ]
flex-end	[ 行末から配置、右揃え ]
center	[ 中央揃え ]
space-between	[ 最初と最後の子要素を両端に配置し、残りは均等に間隔をあけて配置 ]
space-around	[両端の子要素も含め、均等に間隔をあけて配置 ]

  Css
  .parent {
    justify-content: flex-start;
  }

flex-start

flex-end

space-between

space-around

□ align-items 　∩

垂直方向のどの位置に配置するかを指定する

  Css
  .parent {
   align-items: stretch;
  }

使える値
stretch（初期値）	[ 親要素の高さ、またはコンテンツの一番多い子要素の高さに合わせて広げて配置 ]
flex-start	[ 親要素の開始位置から上揃えで配置 ]
flex-end	[ 親要素の終点から下揃えで配置 ]
center	[ 中央揃えで配置 ]
baseline	[ ベースラインで揃えて配置 ]

stretch

flex-start

flex-end

center

baseline

□ align-content 　∩

複数行にした時どの様に配置するかを指定する

  Css
  .parent {
   align-content: stretch;
  }

使える値
stretch（初期値）	[ 親要素の高さに納まるように、子要素の高さを自動調整して揃える ]
flex-start	[ 親要素の開始位置から上揃えで配置 ]
flex-end	[ 親要素の終点から下揃えで配置 ]
center	[ 中央揃えで配置 ]
space-between	[ 縦方向に均等間隔（両端余白なし）で配置 ]
space-around	[ 縦方向に均等間隔（両端も均等に含め余白あり）で配置 ]

stretch

flex-start

flex-end

center

space-between

space-around

子要素（Flexアイテム）に指定するプロパティ　 ∩

親要素にFlexboxコンテナーを定義すると、子要素は自動的に「Flexboxアイテム」となります。
子要素にで指定できるプロパティは以下の通。

order	［子要素の順番を指定］
flex-grow	［親要素にスペースが有れば、子要素の間での伸び率を指定］
flex-shrink	［親要素が不足した時、子要素の間での縮む率を指定］
flex-basis	［幅の指定］
flex	［flex-grow、flex-shrink、flex-basis のプロパティーを一行で指定］
align-self	［子要素の垂直位置の配置を指定］

□ order　 ∩

子要素を任意の順で並べ替えられます。

Css
  .flex-item01 { order: 2; }
  .flex-item02 { order: 4; }
  .flex-item03 { order: 1; }
  .flex-item04 { order: 3; }
  
  ※使える値：数値のみです。初期値は1で、マイナス値は無効になります。

□ flex-grow　 ∩

Css
.flex-item02 { flex-grow: 5; }
  
  ※使える値：数値のみです。初期値は1で、マイナス値は無効になります。

親要素にスペースがある場合、子要素が他の子要素に対してどれくらい伸びるかを指定します。

□ flex-shrink　 ∩

親要素にスペースがなく子要素が入り切らない場合、指定のある子要素が他の子要素に対してどれくらい縮むかを指定します。

Css
  .flex-item02 { flex-shrink: 5; }
  
  ※使える値：数値のみです。初期値は0で、マイナス値は無効になります。

□ flex-basis　 ∩

widthと同じように幅の値を指定でき、autoと指定した場合は子要素のコンテンツのサイズが適応されます。

Css
  .flex-item02 { flex-basis: 200px; }
  
  ※使える値：初期値はautoです。幅の指定と同様、% や px で指定できます。

□ flex　 ∩

Css
  .flex-item02 { flex: 1 5 200px; }

flex-grow、flex-shrink、flex-basis の3つのプロパティーを一行で指定できます。
初期値は [ flex: 0 1 auto ] です。

□ align-self　 ∩

親要素に高さにスペースがある場合、子要素を垂直方向のどの位置に配置するかを指定します。
flexコンテナに指定するalign-itemsと同じ機能ですが、align-self が align-items よりも優先されます。

使える値
auto（初期値）	[ 親要素の align-items の値を継承 ]
stretch	[ 親要素の高さ、又は一番多いコンテンツの高さに広げて配置 ]
flex-start	[ 親要素の開始位置から上揃えで配置 ]
flex-end	[ 親要素の終点から下揃えで配置 ]
center	[ 中央で揃える ]
baseline	[ ベースラインで揃える ]

Css
  .flex-containe { align-items: flex-end; }
  .flex-item01 { align-self: auto; }
  .flex-item03 { align-self: auto; }

auto

stretch

flex-start

flex-end

center

baseline