【CODEMYマンツーマンレッスン後記】～CSS3 flexが便利すぎる～ - Webサイト専門プログラマの言いたい放題

f:id:wp-lesson:20160908155827j:plain

CSSフレックスBOXを使いこなしましょう。
　
　
CSS3で策定されたプロパティ「flex」。
これを使うと、ウェブページのコンテンツを
縦や横にきれいに簡単に並べることができます。
　
　
ボックス同士の余白を均等割りするのも、
プロパティ１発でOK。
　
　
いちいち、ボックスの個数に応じて
パディングやマージンを計算する必要も
ありません。
　
　
従来は、float を使って並べる方法が主流でしたが、
clear を忘れてレイアウトが崩れたり、
float を使ったタグの親要素の高さが認識されないなど、
煩わしい問題がありました。
　
　
「flex」はそういった問題を解決してくれます。
Safariの対応が遅れていることを考慮して、
ベンダープレフィックスの「-webkit-」だけ
つけておけば良いでしょう。
　
　
例として、横４列で余白を自動で均等割り
する方法をご紹介します。
　
　
▼HTML

<ul>
　<li>1つ目</li>
　<li>2つ目</li>
　<li>3つ目</li>
　<li>4つ目</li>
　<li>5つ目</li>
　<li>6つ目</li>
</ul>

▼親要素 ulタグのCSS

ul {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}