HOME  > Web design  >

[CSS]  Flexboxの活用


Flexboxは、フレキシブルボックスレイアウトモジュール(Flexible Box Layout Module)です。

<frameset> タグが、HTML5で廃止されたので、その代替えとして、FlexBoxを利用しました。


① FlexBoxを使って要素を横並びに配置する

サンプルHTMLコード(サンプルの表示


.flexboxCont

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>に当てはまらない場合に使用します。
  • <section>:章。範囲内のコンテンツがドキュメントの章のようなかたまりの範囲に適用します。
  • <article>:単独で成立するコンテンツの範囲に使用します。この部分を、別のHTMLファイルに成立する範囲に適用します。

ただし、この使い分けが判りにくいので、一番元になるボックスを<div>、それ以降の子ボックスを<section>、<article>は、明確に適用箇所とわかる場合のみ、といった使い分けをしています。ただ、全て<div>でも、表示としては問題なさそうです。


② FlexBoxと通常のボックスレイアウトの組み合わせ

サンプルHTMLコード(サンプルの表示


.box1_1〜2,.box2_1〜3

.box1_1〜2,.box2_1〜3は、クラス.box1,box2を親として配置されるボックスのクラスです。
クラス.box1,box2には、display:flex;を設定していないので、縦並びに配置されます。