Flexboxは、フレキシブルボックスレイアウトモジュール(Flexible Box Layout Module)です。
<frameset> タグが、HTML5で廃止されたので、その代替えとして、FlexBoxを利用しました。
サンプルHTMLコード(サンプルの表示)
FlexBoxを格納するクラスを設定します。
FlexBoxは、プロパティ=display、値=flex で設定します。値が、-webkit-flex は、Safariに対応するためのベンダープレフィックス-webkit-が必要です。古いバージョンのブラウザでは、さらに個別のベンダープレフィックスが必要となりますが、セキュリティ等の問題おあるため除外しています。
.box1〜5<div class="flexboxCont">を親ボックとして、その中に配置するボックス。display:flex; の設定により、box1〜5が横並びで配置されます。
display:flex; の設定は、その直下のボックスのみに適用されます。
<div> 〜 </div><div> 〜 </div>で囲んだ部分を一つの単位として、この単位でスタイルを設定したりします。
<section> 〜 </section><section>は、<div>と同じですが、使う場所により、<div>、<section>、<article>を使い分けます。
ただし、この使い分けが判りにくいので、一番元になるボックスを<div>、それ以降の子ボックスを<section>、<article>は、明確に適用箇所とわかる場合のみ、といった使い分けをしています。ただ、全て<div>でも、表示としては問題なさそうです。
サンプルHTMLコード(サンプルの表示)
.box1_1〜2,.box2_1〜3は、クラス.box1,box2を親として配置されるボックスのクラスです。
クラス.box1,box2には、display:flex;を設定していないので、縦並びに配置されます。