flexboxを使用して、左のカラムを1つのdivで囲わない2カラムのレイアウトの作成法

前提・実現したいこと

①flexboxを使用して、上記レイアウトの作成法を模索しています。
②左のカラム(header~footer)はdivなどで囲わないやり方を希望します。
⇒スマホ仕様にレスポンシブする際、sideをcontent2とfooterの間に入れて1カラムにしたいため。

宜しくお願い致します。

【追記】
質問内容は、課題で出された問題であるため、使用プロパティはflexboxを考えております。

該当のソースコード

HTML
1  <body>
2    <div id="wrap">
3      <div id="header">
4      </div>
5      <div id="menu">
6      </div>
7      <div id="content1">
8      </div>
9      <div id="content2">
10      </div>
11      <div id="side">
12      </div>
13      <div id="footer">
14      </div>
15    </div>
16  </body>

chinpos_soup

2019/05/12 05:28

HTMLのwrapとかは、そのままでいいんですか？

u-ma

2019/05/12 05:32

chinpos_soupさんそのままでいい、というのはレスポンシブする際wrapを可変させるかということでしょうか？でしたら、可変させる予定です。違う意味に解釈していましたら、申し訳ございません。

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

回答2件

ベストアンサー

質問者さんの実現したい配置は、 flex-flow プロパティと order プロパティを用いることで実現出来ると思います(動作確認用リンク)。

HTML
1<body>
2  <div id="wrap">
3    <div id="header">
4      header
5    </div>
6    <div id="menu">
7      menu
8    </div>
9    <div id="content1">
10      content1
11    </div>
12    <div id="content2">
13      content2
14    </div>
15    <div id="side">
16      side
17    </div>
18    <div id="footer">
19      footer
20    </div>
21  </div>
22</body>

CSS
1body {
2  margin: 0;
3}
4
5#wrap {
6  display: flex;
7  flex-flow: column wrap;
8  width: 100%;
9  height: 100vh;
10}
11
12div {
13  width: 50%;
14  flex: 1;
15}
16
17#header {
18  background-color: #ffa;
19}
20
21#menu {
22  background-color: #faf;
23}
24
25#content1 {
26  background-color: #faa;
27}
28
29#content2 {
30  background-color: #aff;
31}
32
33#side {
34  background-color: #afa;
35  order: 1;
36  flex: 0 0 100%;
37}
38
39#footer {
40  background-color: #aaf;
41}