ちょっと複雑な画像の並べ方

Question

1つのdivの中に、右図のように画像を並べるにはどういった方法が考えられますでしょうか。
1つの案としては、親要素・子要素でtopからいくら、leftからいくらと指定することが考えられると思います。

Answer 1

以下はいかがでしょうか．

<div>
  <div>
    <img src="s.jpg">
    <img src="s.jpg">
  </div>
  <div>
    <img src="s.jpg">
    <img src="s.jpg">
    <img src="s.jpg">
  </div>
  <div>
    <img src="s.jpg">
    <img src="s.jpg">
  </div>
</div>

div {
  display: flex;
  justify-content: center;
  align-items: center;
}
div div {
  display: flex;
  flex-direction: column;
}

Comments

[goldg]

お見事です。
ありがとうございます。
こんな方法があるんですね。