メインコンテンツを可変、サイドバーを幅固定のレイアウトをflexboxで実装しようとした際に少し迷ったのでメモ。
サンプルコード
最初に上手くいかなかった例です。
HTML
1 2 3 4 | <div class="contents"> <div class="main">メインコンテンツ</div> <div class="sub">サイドバー<br>幅:<span class="sub-width"></span>px</div></div> |
確認用に.sub-width部分にサイドバーの幅が入るようにします。
JavaScript
1 2 3 | $(window).on('load resize', function() { $('.sub-width').text($('.sub').width());}); |
最後にCSSです。
.contentsにdisplay flex、.subは固定幅、.mainはwidth 100%を指定しました。
CSS
1 2 3 4 5 6 7 8 9 | .contents { display: flex;}.main { width: 100%;}.sub { width: 300px;} |
これで想定に近いレイアウトにはなったのですが、.subが指定した幅で固定になっていませんでした。
上手くいかなかった場合のデモページ
調べてみて、.mainにflex: 1と指定すると想定した形にすることができました。
CSS
1 2 3 4 5 6 7 8 9 | .contents { display: flex;}.main { flex: 1;}.sub { width: 300px;} |
コメントが承認されるまで時間がかかります。