Verwenden von Bildern in Flexbox

Question

Ich versuche, eine Filmseite mit Flexbox zu erstellen. Ich habe drei Bilder in einer Flexbox, aber ich kann sie nicht übereinander bringen, sie werden nur nebeneinander platziert. Irgendwelche Tipps? Und übrigens, ich mache die Seite noch nicht ansprechend.

CSS

/*FLEXBOKS*/ 

.flex-container{ 
    display: flex; 
    flex-wrap: wrap; 
    flex-direction: row; 
    justify-content: center; 
    align-items: center; 
    align-content: center; 
    margin: 100px; 

} 


.flex-item1{ 
    order: <integer>; 
    flex-grow: 1; 
    flex-shrink: 1; 
    flex-basis: auto; 
    align-self: stretch; 
    background-color: #B0B0B0; 

} 

.flex-item2{ 
    order: <integer>; 
    flex-grow: 2; 
    flex-shrink: 1; 
    flex-basis: auto; 
    align-self: baseline; 
    background-color: #B0B0B0; 
} 



.flex-item3{ 
    order: <integer>; 
    flex-grow: 2; 
    flex-shrink: 1; 
    flex-basis: auto; 
    align-self: baseline; 
    background-color: #B0B0B0; 

} 

.flex-item4{ 

    order: <integer>; 
    flex-grow: 2; 
    flex-shrink: 1; 
    flex-basis: auto; 
    align-self: baseline; 
    background-color: orange; 

} 

HTML

<div class="flex-container"> 


<div class="flex-item1"> 
<h2>NEW MOVIES</h2> 
<img src="The_Intouchables_3.jpg" width="200" height="250"> 
<img src="The_Lunchbox_1.jpg" width="200" height="250"> 
<img src="montypythonandtheholygrail_1.jpg" width="200" height="250"> 
</div> 



<div class="flex-item2">LAST RENTED</div> 


<div class="flex-item3">RECOMMENDATIONS</div> 


<div class="flex-item4">RULES</div> 



</div> 

Answer 1

Set mit dem Flex-Container die CSS-Regel

flex-direction: column; 

Answer 2

Sie können uns e folgende CSS

.flex-container{ 
    display: flex; 
    flex-wrap: wrap; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    align-content: center; 
    margin: 100px; 
}