Flexboxに挑戦 5 (２カラム／３カラム)

２カラム・３カラムのレイアウトを作ってみる。（※初めてやったので参考程度にお願いします。）

---

２カラム

HTML

<div class="container_test0"> <div class="header">TITLE</div> <div class="main_test"> <div class="column column1"> <a href=""><li>カテゴリ</li></a> <a href=""><li>カテゴリ</li></a> <a href=""><li>カテゴリ</li></a> <a href=""><li>カテゴリ</li></a> <a href=""><li>カテゴリ</li></a> <a href=""><li>カテゴリ</li></a> </div> <div class="column column2"> <h5>本文</h5> <p style="margin:1rem 0 1rem;">ひとまず何はともあれ、そうした幸福・仕合せのための偽りは、尊敬を自己についにもたらすために言ってくれるなら、ほとんど、とにかく22年も生きるなど、上流にこそ未練がなければ、私にそれらが打ち壊すであろう事を見せることはないだろう。それで場合によっては、全く受売であっても、相当にさきほどのように遠慮がなければ、いろいろ独立した風聞吹聴は、使ってはみてもそのものが実は時代遅れであり、人に聞かせても意味のないことなのかもしれない。</p> </div> </div> <div class="footer_test">FOOTER INFORMATION</div> </div>

CSS

/*　↓各部サイズ↓　*/ .container_test0{width:600px;} /*全体の幅*/ .column1{flex:0 0 200px;} /*左サイドバーの幅*/ .column2{flex:1 1 auto;} /*中央カラムの幅*/ /*　↑各部サイズ↑　*/ /*　↓ヘッダ↓　*/ .container_test0 .header{ background:darkblue; border:none; text-align:center; font-size:xx-large; line-height:2; color:white; } /*　↑ヘッダ↑　*/ /*　↓ 中段全体(Flexbox) ↓　*/ .container_test0 .main_test{display:flex;border:none;} /*　↑ 中段全体(Flexbox) ↑　*/ /*　↓左サイドメニュー↓　*/ .container_test0 .main_test .column1{ background:lightblue; border:none; margin:0; padding:3px; text-align:center; } .container_test0 .main_test .column1 a{ text-decoration:none; } .container_test0 .main_test .column1 li{ list-style-type:none; border:outset 3px lightblue; background:lightblue; padding:5px 10px; margin:0; } /*　↑左サイドメニュー↑　*/ /*　↓ 中央カラム ↓　*/ .container_test0 .main_test .column2{ background:yellow; border:none; padding:1em; } /*　↑ 中央カラム ↑　*/ /*　↓ フッター ↓　*/ .container_test0 .footer_test{ background:cadetblue; border:none; text-align:center; line-height:2; color:white; } /*　↑ フッター ↑　*/

---

３カラム

HTML

<div class="container_test1"> <div class="header">TITLE</div> <div class="main"> <div class="column column1"> <a href=""><li>カテゴリ</li></a> <a href=""><li>カテゴリ</li></a> <a href=""><li>カテゴリ</li></a> <a href=""><li>カテゴリ</li></a> <a href=""><li>カテゴリ</li></a> <a href=""><li>カテゴリ</li></a> </div> <div class="column column2"> <h5>本文</h5> <p style="margin:1rem 0 1rem;">ひとまず何はともあれ(以下略</p> </div> <div class="column column3"> <div class="wjt wjt1"> <h5>プロフィール</h5> <p>そこ国家ではしかも～(以下略</p> </div> <div class="wjt wjt2"> <h5>リンク</h5> <a href=""><li>リンク</li></a> <a href=""><li>リンク</li></a> <a href=""><li>リンク</li></a> <a href=""><li>リンク</li></a> </div> <div class="wjt wjt3"> <h5>おすすめ記事</h5> <a href=""><li>記事１</li></a> <a href=""><li>記事２</li></a> <a href=""><li>記事３</li></a> </div> </div> </div> <div class="footer_test">FOOTER INFORMATION</div> </div>

CSS

/*　↓各部サイズ↓　*/ .container_test1{width:600px;} /*全体の幅*/ .column1{flex:0 0 125px;} /*左サイドバーの幅*/ .column2{flex:1 1 auto;} /*中央カラムの幅*/ .column3{flex:0 0 125px;} /*右サイドバーの幅*/ /*　↑各部サイズ↑　*/ /*　↓ヘッダ↓　*/ .container_test1 .header{ background:darkblue; border:none; text-align:center; font-size:xx-large; line-height:2; color:white; } /*　↑ヘッダ↑　*/ /*　↓ 中段全体(Flexbox) ↓　*/ .container_test1 .main{display:flex;border:none;} /*　↑ 中段全体(Flexbox) ↑　*/ /*　↓左サイドメニュー↓　*/ .container_test1 .main .column1{ background:lightblue; border:none; margin:0; padding:3px; text-align:center; } .container_test1 .main .column1 a{ text-decoration:none; } .container_test1 .main .column1 li{ list-style-type:none; border:outset 3px lightblue; background:lightblue; padding:5px 10px; margin:0; } /*　↑左サイドメニュー↑　*/ /*　↓ 中央カラム ↓　*/ .container_test1 .main .column2{ background:yellow; border:none; padding:1em; } /*　↑ 中央カラム ↑　*/ /*　↓ 右カラム ↓　*/ .container_test1 .main .column3{ background:lightpink; border:none; text-align:center; } .container_test1 .main .column3 .wjt{ margin:0; padding:0; } #main .container_test1 .main .column3 .wjt h5{ display:block; margin:0; padding:3px; background:hotpink; color:white; font-style:normal; width:100%; border:none; } .container_test1 .main .column3 .wjt p{ margin:0; padding:5px; text-align:left; border:none; } .container_test1 .main .column3 .wjt li{ list-style-type:none; } /*　↑ 右カラム ↑　*/ /*　↓ フッター ↓　*/ .container_test1 .footer_test{ background:cadetblue; border:none; text-align:center; line-height:2; color:white; } /*　↑ フッター ↑　*/

---

やっぱり、floatを使わないでレイアウトがシンプルにできるので、Frexboxは楽ですね(^^)