flexboxを使ってレイウトの作成を行なっておりますがサイドバーにボックス配置が出来ず困っております。
floatは使わずにして、どのようにサイドバーにflexboxを使用し
綺麗に並べることが出来ますでしょうか。
発生している問題・エラーメッセージ
※CSSコード参照)
該当のソースコード
css
1body { 2 margin: 0; 3 padding: 0; 4 font-size: 15px; 5} 6 7#main_wrapper { 8 width: 960px; 9 border: solid 1px #333; 10 padding: 10px; 11 margin: 0 auto; 12} 13 14#header { 15 border: solid 1px #333; 16 margin-bottom: 10px; 17} 18 19#menu { 20 border: solid 1px #333; 21 margin-bottom: 10px; 22} 23 24#main_flexbox { 25 width: 960px; 26 display: flex; 27} 28 29#left_wrapper { 30 width: 624px; 31} 32 33.contents1 { 34 border: solid 1px #333; 35 height: 80px; 36 padding: 5px; 37 display: flex; 38 margin-bottom: 10px; 39} 40 41.box1, .box2, .box3, .box4 { 42 border: solid 1px #333; 43 flex: 1; 44 justify-content: space-around; 45 margin: 5px; 46} 47 48.contents2 { 49 border: solid 1px #333; 50 height: 80px; 51 padding: 5px; 52 display: flex; 53 margin-bottom: 10px; 54} 55 56.box5, .box6, .box7 { 57 border: solid 1px #333; 58 flex: 1; 59 justify-content: space-around; 60 margin: 5px; 61} 62 63.contents3 { 64 border: solid 1px #333; 65 height: 80px; 66 padding: 5px; 67 display: flex; 68 margin-bottom: 10px; 69} 70 71.box8, .box9 { 72 border: solid 1px #333; 73 flex: 1; 74 justify-content: space-around; 75 margin: 5px; 76} 77 78.contents4 { 79 border: solid 1px #333; 80 height: 80px; 81 padding: 5px; 82 display: flex; 83 margin-bottom: 10px; 84} 85 86.box10, .box11, .box12, .box13, .box14, .box15 { 87 border: solid 1px #333; 88 flex: 1; 89 justify-content: space-around; 90 margin: 5px; 91} 92 93#right_wrapper { 94 width: 326px; 95 border: solid 1px #333; 96 padding: 0px 10px 0px 10px; 97 margin: 0px 0px 10px 10px; 98 display: flex; 99 flex-direction: column; 100} 101 102.rightbox1 { 103 flex-basis: content; /*横幅 縦幅記述?*/ 104} 105 106.rightbox2, .rightbox3 { 107/*ここにコードを記述*/ 108} 109 110.rightbox4, .rightbox5, .rightbox6 { 111/*ここにコードを記述*/ 112} 113 114.rightbox7 { 115/*ここにコードを記述*/ 116} 117 118#footer { 119 border: solid 1px #333; 120}
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<meta name="viewport" content="width=device-width,initial-scale=1"> 6<link rel="stylesheet" href="css/layout_float4_flexbox4.css"> 7<title>flexboxレイアウト4</title> 8</head> 9 <body> 10 <div id="main_wrapper"> 11 <div id="header"> 12 <h1>ヘッダー</h1> 13 </div> 14 <div id="menu"> 15 <h2>メニュー</h2> 16 </div> 17 <div id="main_flexbox"> 18 <div id="left_wrapper"> 19 <div class="contents1"> 20 <div class="box1"></div> 21 <div class="box2"></div> 22 <div class="box3"></div> 23 <div class="box4"></div> 24 </div> 25 <div class="contents2"> 26 <div class="box5"></div> 27 <div class="box6"></div> 28 <div class="box7"></div> 29 </div> 30 <div class="contents3"> 31 <div class="box8"></div> 32 <div class="box9"></div> 33 </div> 34 <div class="contents4"> 35 <div class="box10"></div> 36 <div class="box11"></div> 37 <div class="box12"></div> 38 <div class="box13"></div> 39 <div class="box14"></div> 40 <div class="box15"></div> 41 </div> 42 </div> 43 <div id="right_wrapper"> 44 <div class="rightbox1"></div> 45 <div class="rightbox2"></div> 46 <div class="rightbox3"></div> 47 <div class="rightbox4"></div> 48 <div class="rightbox5"></div> 49 <div class="rightbox6"></div> 50 <div class="rightbox7"></div> 51 </div> 52 </div> 53 <div id="footer"> 54 <h2>フッター</h2> 55 </div> 56 </body> 57</html>
試したこと
right_wrapper(サイドバー)に、display: flex; と flex-direction: column;を記述。
子の.rightbox1 ~ .rightbox7に対し下記のコードを記述したが上手くいかず。
flex-basis: content:横幅 縦幅
補足情報(FW/ツールのバージョンなど)
Google Chrome バージョン: 65.0.3325.181(Official Build) (64 ビット)
テキストエディタ:Brackets 使用
回答2件
あなたの回答
tips
プレビュー