こういった感じの実装方法は？

こういった感じのレイアウトを実装したいのですが、flexboxで可能でしょうか？
横と縦をまぜて自在にレイアウトするのがなかなか難しいのですが

m.ts10806

2019/09/29 20:54

「なかなか難しい」ということはそれなりに試したり調べたりされたことはあるのでは。まずは質問者さんがやったことを記載してください。 (やってみた、という文言だけでは何もやってないのと同義です)

insomnyaa

2019/09/29 21:52

ありがとうございます。私の最後の文が余計でしたね。質問の意図は私の汚いコードを直してということではなく、 floatレイアウトで躓いたのでflexboxなら可能かな？可能であるなら書き方のお手本か上手く説明されているリンクなど教えていただければと思い質問しました。

m.ts10806

2019/09/29 23:10 編集

ガイドラインの話です。 https://teratail.com/help/question-tips#questionTips3-5 今の質問内容を要約すると「コードください」です。丸投げですね。「コード直して」はリファクタリング、デバッグ依頼ですし、実際に問題が起きているコードをもってどのようにその問題を解決していくかがベターな使い方なので「コード直して」にはなりません。始めからきれいに書ける人がいないことを加味すると、汚かろうとなんだろうと自身がやったものを提示するのはこの手のサイトではマナーです。

kyoya0819

2019/09/30 05:36

ぶっちゃけfloatもflex使わなくてもいけますけどね

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

回答3件

ベストアンサー

can,can’tでいったらcanです。

HTML
1<div id=b1><div id=box1 class=boxa>box1</div><div id=box2 class=boxa>box2</div><div id=box3 class=boxa>box3</div></div>
2<div id=b2><div id=box4 class=boxb></div><div id=box5 class=boxb></div><div id=box6 class=boxb></div><div id=box7 class=boxb></div></div>
3<div id=b3><div id=box8 class=boxc>box4</div><div id=box9 class=boxc>box5</div><div id=box10 class=boxc>box6</div><div id=box11 class=boxc>box7</div></div>

CSS
1* {
2  margin: 0;
3  padding: 0
4}
5#b1 {
6  position: absolute;
7  display: inline-block;
8  margin-left: 12.5vw;
9  z-index: 100
10}
11#b2 {
12  position: absolute;
13  top: 0;
14  z-index: 0;
15}
16#b3 {
17  position: absolute;
18  top: 20vh;
19  z-index: 0;
20}
21.boxa, .boxb, .boxc {
22  text-align: center;
23  display: inline-block;
24  height: 20vh;
25  line-height: 20vh;
26  width: 25vw
27}
28
29
30#box1 {
31  background: yellow
32}
33#box2 {
34  background: blue
35}
36#box3 {
37  background: green
38}
39#box4, #box8 {
40  background: skyblue
41}
42#box5, #box9 {
43  background: darkblue
44}
45#box6, #box10 {
46  background: pink
47}
48#box7, #box11 {
49  background: brown
50}

サンプル

line-heightで閃いた。

HTML
1<div id=b1><div id=box1 class=boxa>box1</div><div id=box2 class=boxa>box2</div><div id=box3 class=boxa>box3</div></div>
2<div id=b2><div id=box4 class=boxb><br>box4</div><div id=box5 class=boxb><br>box5</div><div id=box6 class=boxb><br>box6</div><div id=box7 class=boxb><br>box7</div></div>

CSS
1* {
2  margin: 0;
3  padding: 0
4}
5#b1 {
6  position: absolute;
7  display: inline-block;
8  margin-left: 12.5vw;
9  z-index: 100
10}
11#b2 {
12  position: absolute;
13  top: 0;
14  z-index: 0
15}
16.boxa, .boxb {
17  text-align: center;
18  display: inline-block;
19  height: 20vh;
20  line-height: 20vh;
21  width: 25vw
22}
23.boxb {
24  height: 40vh
25}
26
27#box1 {
28  background: yellow
29}
30#box2 {
31  background: blue
32}
33#box3 {
34  background: green
35}
36#box4 {
37  background: skyblue
38}
39#box5 {
40  background: darkblue
41}
42#box6 {
43  background: pink
44}
45#box7 {
46  background: brown
47}

サンプル

まぁもっといい書き方は他にあると思いますはひらめきでふた通りの答えを出してみました。

一番上にしない場合は

HTML
1<div id=b1><div id=box1 class=boxa>box1</div><div id=box2 class=boxa>box2</div><div id=box3 class=boxa>box3</div></div>
2<div id=b2><div id=box4 class=boxb><br>box4</div><div id=box5 class=boxb><br>box5</div><div id=box6 class=boxb><br>box6</div><div id=box7 class=boxb><br>box7</div></div>

CSS
1* {
2  margin: 0;
3  padding: 0
4}
5#b1 {
6  position: relative;
7  top: 0;
8  display: inline-block;
9  margin-left: 12.5vw;
10  z-index: 100
11}
12#b2 {
13  position: relative;
14  top: -20vh;
15  z-index: 0;
16}
17#b3 {
18  position: absolute;
19  top: 20vh;
20  z-index: 0;
21}
22.boxa, .boxb {
23  text-align: center;
24  display: inline-block;
25  height: 20vh;
26  line-height: 20vh;
27  width: 25vw
28}
29.boxb {
30  height: 40vh
31}
32
33#box1 {
34  background: yellow
35}
36#box2 {
37  background: blue
38}
39#box3 {
40  background: green
41}
42#box4 {
43  background: skyblue
44}
45#box5 {
46  background: darkblue
47}
48#box6 {
49  background: pink
50}
51#box7 {
52  background: brown
53}