Eyecatch html css

HTML,CSS

【CSS】CSS3のflexboxで簡単に2カラムのレイアウトを作ってみる

2016/08/23

2カラムレイアウトのページを作って欲しいと言われたので、せっかくなので HTML5 と CSS3 で作ってみようということで、調べてみましたらえらく簡単に2カラムレイアウトができることが分かりました。

ウェブサイトを作成する際、2カラムや3カラムのレイアウトにしようとすると float や position を使わないと出来ませんでしたが、CSS3 では数行のコードで実現可能。

恐らく数ヶ月以内また使う技術だと思うので、忘備録としてポストしておきます。

3カラムレイアウトを作ってみる

とりあえず、3カラムのレイアウトを作成してみます。

HTML

CSS3

基本的には親ブロックに [訂正] display:block; display:box; を指定し、子ブロックに横幅を指定するだけでOK。

となっているのは、Firefox なら「-moz-」、Safari や Google Chrome なら「-webkit-」というプレフィクスを用いているためです。

2015.06.03 追記

以前は上のように書いていましたが、Firefoxでは横並びの3カラムは実現できますが、横幅の指定が全く効かないようになっています。
代わりに、

display: flex;

とすると意図した通りになってくれます。
例に挙げたCSSの .parentBox クラスは以下のように記述すると幸せになれそうです。

追記ここまで。

しかもこの CSS3 では、縦幅の設定をしなくても自動的に一番高い DIV に合わせてくれるという素敵仕様。グゥレイト! でありますね。

デモ

デモはコチラから。

表示する順番を制御してみる

子ボックスの表示順を制御する box-ordinal-group というプロパティもあるので、指定してみます。
例によって、「-webkit-」「-moz-」のプレフィックスをつけて指定します。

CSS3

2015.06.03 追記

こちらも同様、.parentBox クラスは、以下のように修正してください。

追記ここまで。

デモ

デモはコチラから。

これで左から、childB → childC → childA と並びます。
楽ちんですね!

-HTML,CSS
-, , , , ,