flexを使用してレイアウトを組みたいのですが、下記の組み方だとbox内のコンテンツによってカラム落ちしてしまいます。
box_300 ,box_auto をdivで囲ってnowrapを指定すればカラム落ちしないことは分かるのですが、下記の組み方でカラム落ちしない書き方はありますでしょうか?
なにとぞよろしくお願いいたします。
html
1 <ul class="list_flex"> 2 <li class="box_full"></li> 3 <li class="box_300"></li> 4 <li class="box_auto"> 5 <ul class="list_el"> 6 <li><div>コンテンツ</div></li> 7 <li><div>コンテンツ</div></li> 8 <li><div>コンテンツ</div></li> 9 <li><div>コンテンツ</div></li> 10 <li><div>コンテンツ</div></li> 11 </ul> 12 </li> 13 </ul>
css
1 2 .list_flex { 3 display: -webkit-flex; display: flex; 4 -webkit-flex-wrap: wrap; flex-wrap: wrap; 5 } 6 [class*="box_"] { 7 border: 1px solid #000; 8 min-height: 100px; 9 } 10 .box_full { 11 -webkit-flex: 0 0 100%; flex: 0 0 100%; 12 } 13 .box_300 { 14 -webkit-flex: 0 0 300px; flex: 0 0 300px; 15 } 16 .box_auto { 17 -webkit-flex: 1 1 auto; flex: 1 1 auto; 18 } 19 20 .list_el { 21 display: -webkit-flex; display: flex; 22 -webkit-flex-wrap: wrap; flex-wrap: wrap; 23 } 24 .cnt { 25 26 border: 2px solid #ccc; 27 width: 100%; 28 height: 500px; 29 }
回答1件
あなたの回答
tips
プレビュー