html - 在 flexbox 中使用图像

Question

我正在尝试使用 flexbox 制作电影页面。我在一个 flexbox 中有三个图像，但我无法让它们相互重叠，它们只会并排放置。有小费吗？顺便说一句，我还没有让页面响应。

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

给flex容器设置css规则

flex-direction: column;