2018年4月11日
今日の朝活（css3のflexboxを使ってコーディングを時短）
おはようございます。
湘南・茅ヶ崎のホームページ制作オフィス VIVIBOND（ヴィヴィボンド）のミナベです。
flexboxを使ったレイアウトが時短コーディングに欠かせなくなりそうなのでメモです。
HTML
<div class="parent parent01"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div>
space-betweenプロパティ
先頭と末尾の要素が端に寄り、間の要素は均等割りで配置される。
space-aroundプロパティ
均等割りで配置されるが、端に要素はくっつかない。
今回参考にさせていただいた元記事
Flexboxを利用してよくあるレイアウトを実装したサンプル集
感想
レイアウトの際、floatを使うとclearでfloatを解除する必要がありますが、flexboxはfloat（浮かせる）という考え方ではないので、そもそも解除の必要がありません。clearをうっかりつけ忘れがちな私にぴったりなテクニックとも言えますね！どんどん使っていこうと思います。
ひと手間減るので時短になりますし、当然コードもすっきりします。あと、パフォーマンスにもちょっとだけよい影響がでるみたいですね。なんだかいいことだらけのflexbox！
お読みいただき、ありがとうございました！
