当显示为柔性时将一幅图像放下

Question

我有三个彼此相邻的图像，前两个很好，但是我希望第三个图像位于最下面，但是我的代码使所有这些图像都内联。我尝试了<br>，但没有任何解决方案？

<div id="sec">
<div class="firstrow">
          <div class="row1">
            <img src="photos/aaaaaaaa.jpg" style="width:480px;height:450px;"/>
        </div>
          <div class="row11">
            <img src="photos/aaa.jpg" />
          </div>
          <div class="row111">
            <img src="photos/ssss.jpg" style="width:480px;height:700px;"/>
          </div>
        </div></div>

#sec {
  width:1180px;
  height:3000px;
  border-right:5px dashed rgba(235, 64, 52,0.5);
  border-left:5px dashed rgba(235, 64, 52,0.5);
  margin:0 auto;
  border-radius: 20px;
}
#sec .firstrow{
  display:flex;
  justify-content: center;
  margin-top:45px;
}

Answer 1

使用此代码

      .row111 img { display:block; } 

Answer 2

尝试一下：

#sec .firstrow{
  display:flex;
  flex-wrap: wrap /* added this */
  justify-content: center;
  margin-top:45px;
}

然后是您的最后一张图片

.row111{
   flex-basis: 100%; /* force it to take full-width*/
}