flexboxの使い方をまとめてみた

#display:flex; flexboxについてまとめ

私自身display:flex;って親要素にdisplay:flexって書いておけば子要素が勝手に横に並ぶんだろ！
くらいに思っていたのですが、それだけではなく、要素の幅に対してレスポンシブに子要素の幅も指定して、2行にできたりと、使い勝手が良かったので、まとめてみました。

##display:flex;とは？
親要素にdisplay:flex;を指定することで、普通なら縦並びになる子要素が横並びになります！

例：親要素にdisplay:flex;を指定した場合

      <ul class="flex">
        <li class="child"></li>
        <li class="child"></li>
        <li class="child"></li>
        <li class="child"></li>
        <li class="child"></li>
      </ul>

cssの記述

/*親要素に対してdisplay flexを指定する*/
.flex{
  display:flex;
}

.child{
  height:100px;
  list-style:none;
  width:100px;
}
.child:nth-child(1){
  background-color:blue;
  }
.child:nth-child(2){
  background-color:yellow;
}
.child:nth-child(3){
  background-color:red;
}
.child:nth-child(4){
  background-color:purple;
  }
.child:nth-child(5){
  background-color:green;
}

この場合結果は図のように横並びのlist要素ができます。

これだけでもfloatみたいに親要素の高さが０になったりしないし使いやすそうですが、もっと使いやすくできます。

##flex:auto;で親要素いっぱいに子要素を並べる！

flex:auto;をflexboxの子要素に記述することで、子要素を親要素いっぱいに横並びさせることができます。

/*親要素に対してdisplay flexを指定する*/
.flex{
  display:flex;
  background-color:gray;
  height:300px;
  padding:0;
  margin:0;
}

.child{
  height:100px;
  list-style:none;
  flex:auto;  /*flex:autoで幅を指定せずとも横並びいっぱいに配置*/
}
.child:nth-child(1){
  background-color:blue;
  }
.child:nth-child(2){
  background-color:yellow;
}
.child:nth-child(3){
  background-color:red;
}
.child:nth-child(4){
  background-color:purple;
  }
.child:nth-child(5){
  background-color:green;
}

結果：

このように子要素の幅を指定せずとも親要素いっぱいに子要素が広がります。

##flex-wrap:wrap;で画面幅に合わせて子要素を複数行にする！

親要素いっぱいに子要素が並べられていても、画面サイズが小さくなると、子要素一つ一つがどうしても小さくなりますよね。そんなときにはメディアクエリを使用して、ある画面幅があるサイズより小さくなったときに、親要素にflex-wrap:wrap;を指定してあげましょう！

**　親要素にflex-wrap:wrap;を指定し子要素に幅を指定してあげる。(max-width:1000px)**

/*省略*/
.
.
@media (max-width:1000px){
  .flex{
    flex-wrap:wrap;
  }
  .child{
    width:50%;
  }
}

これで
画面幅が1000px以下の時は、子要素が幅５０％で横並びになるようになり、親要素からはみ出る部分は下に回り込み、複数行になります。

結果１：1000px以下の時

結果２：1000px以上の時

このメディアクエリとflex-wrap:wrap;を掛け合わせることにより、幅が小さくなりすぎないレスポンシブなデザインを設計しやすいですね！

##flex-direction:column;で要素を縦並びに！

スマートフォンの画面などの時は要素を横並びだったのを縦に並べたいですよね！
そんなときはflex-direction:column;が使えます！これを親要素に記述することで親要素が縦並びになります。また、この時もメディアクエリと併用して使いましょう。スマートフォン画面で見る想定で画面幅最大値を670pxの時としましょう。

@media (max-width:670px){
  .flex{
    flex-direction:column;
  }
  .child{
    margin:auto; /*listには幅が指定してあるのでmargin:auto;で中央に配置*/
  }
}

結果：670px以下の時

##まとめ

このようにflexboxはメディアクエリと掛け合わせて使うことで、レスポンシブなデザインを簡単に設計できるようになります。

[まとめ]
display:flex; 親要素に適用　（子要素を横並びにする）
display:auto; 子要素に適用　 (親要素いっぱいに子要素を横並び)
flex-wrap:wrap;親要素に適用 (子要素の幅を指定することで、親要素からはみ出た子要素が下に回り込む)
flex-direction:column; 親要素に適用　（子要素を横並びに）