CSS レイアウト単に複雑なレイアウト

全体は水平中央整列、図のboxは垂直中央寄せ、1から11までのコンテンツは水平中央整列。
boxとコンテンツには画像やテキストを配置したい。
boxはコンテンツに丁度密着するようにしたい。

Lhankor_Mhy

2016/12/01 07:56

補足願います。「オート」と書いてある部分はなんですか？

Lhankor_Mhy

2016/12/01 08:03

ああ、もしかして上下マージンがオートということかな。

konkuro1007

2016/12/01 08:16 編集

margin: autoのイメージなんですけど、オートとか何も書いてない所は何もないと考えてくれていいです。

行動規範の内容に同意します

回答1件

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}