Blog

css3のFlexible Box Layout Moduleで横並びレイアウトが簡単に!

2014.11.25Cat:css3 デザイナー

いわゆるFlexibleBoxとかFlexBoxとか呼ばれてるみたいなんですが、こちらまだ実践で使ったことがないので、試しに使ってみました。

こちらはcss3なので最新のブラウザしか対応してなくて、IE9ですら対応してないようなので、実践には向かないかと思います。

こちらはその名の通り、レイアウトをフレキシブルにできるもので、今までカラムをfloatを使っていたものをこちらのプロパティでできるというものです。
考え方としてはtableと似てると思います。

CSS Flexible Box Layout Module Level 1

とりあえずデモがありますのでそちらをご覧ください。

グロナビと、メインビジュアル下のコンテンツに使用しています。

DEMO

htmlは以下のようになります。

これに対してcssは、

親要素にdisplay: flex;を設定するだけで横並びレイアウトが簡単にできます!
あとは、justify-contentやflexの値を変更すると、幅や余白の調整ができます。

ちなみに、justify-contentのプロパティとイメージは以下になります。

参照:CSS Flexible Box Layout Module Level 1

もっと複雑かつ細かく設定できるのですが、本記事ではここまでとさせていただきます。
横並びだけでなく、縦の並びもできるようで、縦中央や縦均等で並べたり、今までなかなかできなかったことが簡単にできるようにもなります。

その辺はまたいずれご説明したいと思います。

Author Profile

Y.A

アベと申します。
ディレクター兼デザイナー兼コーダーです。
まだまだ未熟者ですが、日々頑張っています。。。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ