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