CSSを使用した画像の積み重ねFlexbox

Question

CSS flexboxを使用することを学んでおり、左側に大きな画像を、もう一方に小さな画像を重ねて表示したいと考えています。 CSS flexboxを使用してこれを行うにはどうすればよいですか？

<div class="container"> 
 
     <img class="image1" src="#" alt="null"> 
 
     <img class="image1" src="#" alt="null"> 
 
     <img class="image3" src="#" alt="null"> 
 
</div>

Answer 1

私はこのようにこれを行うだろう：

.container { 
 
    display: flex; 
 
} 
 
.side { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.image { 
 
    display: block; 
 
    margin: 5px; 
 
}

<div class="container"> 
 
     <img class="image" src="http://placehold.it/250x250" alt="null"> 
 
     <div class="side"> 
 
      <img class="image" src="http://placehold.it/120x90" alt="null"> 
 
      <img class="image" src="http://placehold.it/120x150" alt="null"> 
 
     </div> 
 
</div>