気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
補足願います。「オート」と書いてある部分はなんですか?
2016/12/01 08:03
ああ、もしかして上下マージンがオートということかな。
2016/12/01 08:16 編集
margin: autoのイメージなんですけど、オートとか何も書いてない所は何もないと考えてくれていいです。
回答1件
0
HTML
1<div id="wrapper"> 2 <div id="left"> 3 <div class="box"></div> 4 </div> 5 <div id="center"> 6 <div class="numbered">1</div> 7 <div class="numbered">2</div> 8 <div class="numbered">3</div> 9 <div class="numbered">4</div> 10 <div class="numbered">5</div> 11 <div class="numbered">6</div> 12 <div class="numbered">7</div> 13 <div class="numbered">8</div> 14 <div class="numbered">9</div> 15 <div class="numbered">10</div> 16 <div class="numbered">11</div> 17 </div> 18 <div id="right"> 19 <div class="box"></div> 20 </div> 21</div>
CSS
1#wrapper{ 2 width:100%; 3 display: flex; 4} 5#center{ 6 display: flex; 7 flex-flow: row wrap; 8 justify-content: center; 9 flex-basis:1; 10} 11#left, #right{ 12 flex-basis:100px; 13 display: flex; 14 flex-flow: column; 15 justify-content:center; 16} 17 18.box, .numbered{ 19 width:100px; 20} 21.numbered{ 22 height:100px; 23 margin:2px; 24 background-color:#c99; 25} 26.box{ 27 height:150px; 28 background-color:#99c; 29}
https://jsfiddle.net/4s0Lem4u/
質問が変更されたので追記
CSS
1#wrapper{ 2 width:100%; 3 display: flex; 4} 5#center{ 6 display: flex; 7 flex-flow: row wrap; 8 justify-content: center; 9 flex-basis:104px; 10} 11#left, #right{ 12 flex-basis:100px; 13 display: flex; 14 flex-flow: column; 15 justify-content:center; 16} 17 18.box, .numbered{ 19 width:100px; 20} 21.numbered{ 22 height:100px; 23 margin:2px; 24 background-color:#c99; 25} 26.box{ 27 height:150px; 28 background-color:#99c; 29} 30@media (min-width: 768px) { 31 #center { 32 flex-basis: 208px; 33 } 34} 35@media (min-width: 992px) { 36 #center { 37 flex-basis: 312px; 38 } 39} 40@media (min-width: 1200px) { 41 #center { 42 flex-basis: 312px; 43 } 44}
投稿2016/12/01 10:12
編集2016/12/02 08:21総合スコア36115
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。