プチ講座

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を使い分けるのが良いでしょう。

 

メインメニュー

ブログメニュー

タグクラウド

おすすめ記事

【動画】エンプロスが未経験でも医療事務員を輩出できる理由
【動画】エンプロスが未経験でも医療事務員を輩出できる理由