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

Question

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

Comments

[m.ts10806]

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

[insomnyaa]

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

[m.ts10806]

ガイドラインの話です。
https://teratail.com/help/question-tips#questionTips3-5
今の質問内容を要約すると「コードください」です。丸投げですね。

「コード直して」はリファクタリング、デバッグ依頼ですし、
実際に問題が起きているコードをもってどのようにその問題を解決していくかがベターな使い方なので
「コード直して」にはなりません。
始めからきれいに書ける人がいないことを加味すると、汚かろうとなんだろうと
自身がやったものを提示するのはこの手のサイトではマナーです。

[kyoya0819]

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

Answer 1

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

<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>
<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>
<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>

* {
  margin: 0;
  padding: 0
}
#b1 {
  position: absolute;
  display: inline-block;
  margin-left: 12.5vw;
  z-index: 100
}
#b2 {
  position: absolute;
  top: 0;
  z-index: 0;
}
#b3 {
  position: absolute;
  top: 20vh;
  z-index: 0;
}
.boxa, .boxb, .boxc {
  text-align: center;
  display: inline-block;
  height: 20vh;
  line-height: 20vh;
  width: 25vw
}


#box1 {
  background: yellow
}
#box2 {
  background: blue
}
#box3 {
  background: green
}
#box4, #box8 {
  background: skyblue
}
#box5, #box9 {
  background: darkblue
}
#box6, #box10 {
  background: pink
}
#box7, #box11 {
  background: brown
}

サンプル

line-heightで閃いた。

<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>
<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>

* {
  margin: 0;
  padding: 0
}
#b1 {
  position: absolute;
  display: inline-block;
  margin-left: 12.5vw;
  z-index: 100
}
#b2 {
  position: absolute;
  top: 0;
  z-index: 0
}
.boxa, .boxb {
  text-align: center;
  display: inline-block;
  height: 20vh;
  line-height: 20vh;
  width: 25vw
}
.boxb {
  height: 40vh
}

#box1 {
  background: yellow
}
#box2 {
  background: blue
}
#box3 {
  background: green
}
#box4 {
  background: skyblue
}
#box5 {
  background: darkblue
}
#box6 {
  background: pink
}
#box7 {
  background: brown
}

サンプル

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

一番上にしない場合は

<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>
<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>

* {
  margin: 0;
  padding: 0
}
#b1 {
  position: relative;
  top: 0;
  display: inline-block;
  margin-left: 12.5vw;
  z-index: 100
}
#b2 {
  position: relative;
  top: -20vh;
  z-index: 0;
}
#b3 {
  position: absolute;
  top: 20vh;
  z-index: 0;
}
.boxa, .boxb {
  text-align: center;
  display: inline-block;
  height: 20vh;
  line-height: 20vh;
  width: 25vw
}
.boxb {
  height: 40vh
}

#box1 {
  background: yellow
}
#box2 {
  background: blue
}
#box3 {
  background: green
}
#box4 {
  background: skyblue
}
#box5 {
  background: darkblue
}
#box6 {
  background: pink
}
#box7 {
  background: brown
}

最後のはサンプルないですが許してください。

Comments

[insomnyaa]

ありがとうございました。大変参考になりました。
absoluteは他のコンテンツの中に入れたりすると崩れやすいのでなかなかコントロールが難しいですね。

[kyoya0819]

その場合はrelativeを使うと良いです。
今移動中なので到着次第回答に追記させていただきます。

relativeのスペル違うかもです。

[kyoya0819]

修正させていただきました。

Answer 2

矩形レイアウトを超えた !? – CSS Shapes で Web のレイアウトはもっと自由になる – PSYENCE:MEDIA

Answer 3

flowやabsoluteをつかってみては

Comments

[insomnyaa]

ありがとうございます。
absoluteですと被ってしまいそうですが、下段の内容が被らずに上手く表示するのは可能でしょうか？
もう少し調べてみます。