【CSS】CSS3のflexboxで簡単に2カラムのレイアウトを作ってみる
2019/12/17
2カラムレイアウトのページを作って欲しいと言われたので、せっかくなので HTML5 と CSS3 で作ってみようということで、調べてみましたらえらく簡単に2カラムレイアウトができることが分かりました。
ウェブサイトを作成する際、2カラムや3カラムのレイアウトにしようとすると float や position を使わないと出来ませんでしたが、CSS3 では数行のコードで実現可能。
恐らく数ヶ月以内また使う技術だと思うので、忘備録としてポストしておきます。
3カラムレイアウトを作ってみる
とりあえず、3カラムのレイアウトを作成してみます。
HTML
[html]
CHILD-A
CHILD-A
CHILD-A
CHILD-A
CHILD-A
CHILD-B
CHILD-B
CHILD-B
CHILD-C
CHILD-C
CHILD-C
CHILD-C
CHILD-C
CHILD-C
CHILD-C
CHILD-C
CHILD-C
[/html]
CSS3
[css]
[/css]
基本的には親ブロックに [訂正] display:block; display:box; を指定し、子ブロックに横幅を指定するだけでOK。
[css]
display: -moz-box;
display: -webkit-box;
[/css]
となっているのは、Firefox なら「-moz-」、Safari や Google Chrome なら「-webkit-」というプレフィクスを用いているためです。
2015.06.03 追記
以前は上のように書いていましたが、Firefoxでは横並びの３カラムは実現できますが、横幅の指定が全く効かないようになっています。
代わりに、
display: flex;
とすると意図した通りになってくれます。
例に挙げたCSSの .parentBox クラスは以下のように記述すると幸せになれそうです。
[css]
.parentBox{
width: 100%;
display: flex;
}
[/css]
追記ここまで。
しかもこの CSS3 では、縦幅の設定をしなくても自動的に一番高い DIV に合わせてくれるという素敵仕様。グゥレイト！ でありますね。
デモ
表示する順番を制御してみる
子ボックスの表示順を制御する box-ordinal-group というプロパティもあるので、指定してみます。
例によって、「-webkit-」「-moz-」のプレフィックスをつけて指定します。
CSS3
[css]
[/css]
2015.06.03 追記
こちらも同様、.parentBox クラスは、以下のように修正してください。
[css]
.parentBox{
width: 100%;
display: flex;
}
[/css]
追記ここまで。
デモ
デモはコチラから。
これで左から、childB → childC → childA と並びます。
楽ちんですね！
[tgAmazonItemLookup asin="B00NY8YFO2" related="1"]