プチ講座

flexboxを使ってみよう!

久々にHTML・CSSについてです。
これまでホームページのレイアウトを組上げていくにはCSSのfloatプロパティを使用し、ボックスを並べて段組みを作る作業を行っていました。
CSS3では新しくflexboxというプロパティを使うことで、段組みを簡単かつ便利に作成できるようになりました。では、使い方を見てみましょう。

1.まずは使ってみる

See the Pen dGxjRo by SHUHEI NIINO (@emplos-niino) on CodePen.

ULの中にliが4つ入ったメニューボタンなどでよく見かけるソースコードですね。
liにオレンジの背景色を加え余白を入れています。
以前ならば各liに横幅を設定し、floatで横並びにするのが一般的でしたが…

See the Pen JGgBMj by SHUHEI NIINO (@emplos-niino) on CodePen.

上記のように横並びにしたいボックスを囲んでいる親要素(見本ではliを囲んでいるul)に対してdispalyプロパティをflexと指定するだけで、各liにfloatをかけた状態と同じになります。clearなどの後処理も必要ありませんのでかんたんですね。

2.便利な使い方

次はflexboxの設定で、ボックスの並べ方を指定してみましょう。

See the Pen vLoaPx by SHUHEI NIINO (@emplos-niino) on CodePen.

ulに「justify-content: space-between;」と追加をしました。これは「ボックスを均等割り付けで配置する」という設定です。
均等割り付けもたった一行でできてしまいます。すごい!

See the Pen rxXrbX by SHUHEI NIINO (@emplos-niino) on CodePen.

次は「justify-content: center;」と入力しました。ボックスが中心に配置されます。positionいらずで便利!

このような感じでレイアウトを組むのがとても楽になりましたが、IE11以下のバージョンでは表示がおかしくなるもしくは効かないので注意をしましょう。
なので当面の間は制作案件によりfloatとflexboxを使い分けるのが良いでしょう。

 

お問い合わせ

エンプロスの職業訓練についてご不明な方は、まずは学科・コース入校から就職までよくある質問をご覧ください。

  • 職業訓練のエンプロスについて、ご質問ご不明点などございましたら、下記のお問い合わせフォームからお問い合わせください。お問い合わせについては、2営業日以内にご返答いたします。

    お問い合わせフォーム
    • 営業時間
      8:50〜18:00
    • 定休日
      土日祝
    • TEL
      079-287-1000