フレックスボックスで画像を使用する

Question

フレックスボックスを使用してムービーページを作成しようとしています。私は1つのフレックスボックスに3つの画像を持っていますが、それらを互いに重ね合わせることはできません。任意のヒント？そしてbtw、私はまだ応答するページを作っていません。フレックスコンテナへ

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

設定CSSルール

flex-direction: column; 

Answer 2

あなたは私たちすることができますe。次のCSS

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