flexboxを使ってみよう！

flexboxは要素を等間隔に横並びにしたり、中央寄せしたり、横並びの要素の高さを全部揃えたりできるもの。

flexboxはCSS3から追加されたCSSの新しい機能。IE11以降から使える。

今までfloatやjsを使って行なっていたものが全てflexboxで行えるようになる。

flexboxの基本

Flexコンテナーと呼ばれる親要素の中に、Flexアイテムと呼ばれる子要素を入れて使う。

          
            

              
Item 1
              
Item 2
              
Item 3
              
Item 4
            
          
        

後は親要素にdisplay:flexを指定するだけ

          
            .container {
              display: flex;
            }
          
        

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

flex-direction … 子要素の並ぶ向き

子要素の上下並びと降順、昇順の並び方が変えられる

• row（初期値）… 子要素を左から右に配置
• row-reverse … 子要素を右から左に配置
• column … 子要素を上から下に配置
• column-reverse … 子要素を下から上に配置

          
            .container {
              display: flex;
              flex-direction: row;
            }
          
        

flex-wrap … 子要素の折り返し

子要素を一行、または複数行に並べるかを指定する。複数行にする場合は子要素が親要素の幅を超えてしまった場合、折り返して複数行に配置されていく

• nowrap（初期値）… 子要素を折り返しせず、一行に並べる
• wrap … 子要素を折り返し、複数行に上から下へ並べる
• wrap-reverse … 子要素を折り返し、複数行に下から上へ並べる

          
            .container {
              display: flex;
              flex-wrap: wrap;
            }
          
        

flex-flow … flex-directionとflex-wrapをまとめて指定

flex-direction と flex-wrap を一行で指定できるプロパティー。初期値は row nowrap

          
            .container {
              display: flex;
              flex-flow: row wrap;
            }
          
        

justify-content … 水平方向の揃え

親要素に空きスペースがあった場合、子要素を水平方向のどの位置に配置するかを指定

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

          
            .container {
              display: flex;
              justify-content: flex-end;
            }
          
        

align-items … 垂直方向の揃え

親要素に空きスペースがあった場合、子要素を垂直方向のどの位置に配置するかを指定

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

          
            .container {
              display: flex;
              align-items: center;
            }
          
        

align-content … 複数行にした時の揃え

子要素が複数行に渡った場合の垂直方向の揃えを指定する。
flex-wrap: nowrap; が適応されていると子要素が一行になるので、align-content は無効になる。

• stretch（初期値）… 親要素の高さに合わせて広げて配置
• flex-start … 親要素の開始位置から配置。上揃え。
• flex-end … 親要素の終点から配置。下揃え。
• center … 中央揃え
• space-between … 最初と最後の子要素を上下の端に配置し、残りの要素は均等に間隔をあけて配置
• space-around … 上下端にある子要素も含め、均等に間隔をあけて配置

          
            .container {
              display: flex;
              align-content: space-between;
            }
          
        

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

order … 順序の指定

通常子要素はHTMLの記述順に配置されるが、order プロパティーを使えば任意の順で並べ替えられる

• 初期値は0。マイナス値を含む数値のみ指定できる。

          
            .container {
              display: flex;
            }
            .item1 { order: 2; }
            .item2 { order: 3; }
            .item3 { order: 1; }
          
        

flex-grow … 子要素の伸びる比率

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

• 数値のみ指定。初期値は0。マイナス値は無効

          
            .container {
              display: flex;
            }
            .item1 { flex-grow: 2; }
            .item2 { flex-grow: 3; }
            .item3 { flex-grow: 1; }
          
        

flex-shrink … 子要素の縮む比率

flex-grow と逆で、親要素に余ったスペースがなくすべての子要素が入り切らない場合、指定のある子要素が他の子要素に対してどれくらい縮むかを指定

• 数値のみ指定。初期値は0。マイナス値は無効

          
            .container {
              display: flex;
            }
            .item1 { flex-shrink: 2; }
            .item2 { flex-shrink: 3; }
            .item3 { flex-shrink: 1; }
          
        

flex-basis … 子要素のベースとなる幅の指定

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

• 数値のみ指定。初期値は0。マイナス値は無効

          
            .container {
              display: flex;
            }
            .item1 { flex-basis: auto; }
            .item2 { flex-basis: 200px; }
            .item3 { flex-basis: 30%; }
          
        

flex … flex-grow、flex-shrink、flex-basisをまとめて指定

flex-grow、flex-shrink、flex-basis の3つのプロパティーを一行で指定.初期値は 0 1 auto.

• 数値のみ指定。初期値は0。マイナス値は無効

          
            .container {
              display: flex;
            }
            .item1 {
              flex: 0 1 30%;
            }
          
        

align-self … 子要素の垂直方向の揃え

親要素に空きスペースがあった場合、子要素を垂直方向のどの位置に配置するかを指定。
親要素に指定する align-items と全く同じ機能だが、こちらは子要素に対して指定する。
この align-self での指定は、親要素に記述する align-items よりも優先される。

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

          
            .container {
              display: flex;
            }
            .item1 {
              align-self: flex-end;
            }