更改Flexbox HTML CSS的方向

Question

我有一个包含4张图片的Flexbox。下图是现在的样子。当前，当我减小宽度时，您看不到第四个图像。

我希望将flexbox转换为下面的这种布局。这样，当宽度为某个px时，它将改变。

我很难做到这一点。我尝试使用flex-direction：column;但这使整个列表都是垂直的，我不希望这样。

div{
  display: flex;
  flex-direction: wrap;
  border-style:solid;
  padding-top: 2em;
}

figcaption[certification=yes]::before {
            font-size: 0.75em;
            /*Check mark*/
            content: "\2705";
            display: inline-block;
            color:red;
}

figcaption[certification=yes]::after {
            font-size: 0.75em;
            /*Dispaly li*/
            content: li;
            display: inline-block;
            color:red;
}

figure{
    padding:2.5em;
    margin-left: 3em;
    margin-bottom:2em;
}

@media screen and (max-width: 1185px)
{
    // I want the 4th image to below the 1st image once you get to the width of 1185px
    div{ 
        flex-direction: column;
    }
    
}

<div>
        <figure>
            <img src="images/ACE.png" height="150em">
            <figcaption data-title="Multimedia and the World Wide Web" certification="yes">Nighthawk</figcaption>
        </figure>
  
        <figure>
            <img src="images/NSCA.png" height="150em">
            <figcaption data-title="Multimedia and the World Wide Web" certification="yes">Nighthawk</figcaption>
        </figure>
   
        <figure>
            <img src="images/USA.png" height="150em">
            <figcaption data-title="Multimedia and the World Wide Web" certification="yes">Nighthawk</figcaption>
        </figure> 
  
        <figure>
            <img src="images/Functional-movement.jpg" height="150em">
            <figcaption data-title="Multimedia and the World Wide Web" certification="yes">Nighthawk</figcaption>
        </figure>
    </div>

Answer 1

您有flex-direction:wrap;

请尝试：flex-wrap:wrap;

此外，不要使用em和vw“视图单位”，而是使用vh单位（或px或rem）。这些单位代表当前屏幕宽度和高度的1％（并且您可以使用单位的分数，因此它们会变得无限细化-例如1.25vw），因此页边距/边框/边距/等也会增长/缩小屏幕尺寸。 视图单位与百分比有何不同？百分比与父div大小的百分比有关，而视图单位是当前视口大小的百分比。

参考文献：

https://yoksel.github.io/flex-cheatsheet/#flex-wrap

https://www.smashingmagazine.com/2016/05/fluid-typography/

---

演示：

div{display:flex;flex-wrap:wrap;border-style:solid;padding-top:2em;}

figcaption[certification=yes]::before{font-size:0.75em;/*Check mark*/content:"\2705";display:inline-block;color:red;}
figcaption[certification=yes]::after{font-size:0.75em;/*Dispaly li*/content:li;display:inline-block;color:red;}
figure{padding:2.5em;margin-left:3em;margin-bottom:2em;}

@media screen and (max-width:1185px)
{// I want the 4th image to below the 1st image once you get to the width of 1185px
    div{flex-wrap:wrap;}
}

<div>
        <figure>
            <img src="images/ACE.png" height="150em">
            <figcaption data-title="Multimedia and the World Wide Web" certification="yes">Nighthawk</figcaption>
        </figure>
  
        <figure>
            <img src="images/NSCA.png" height="150em">
            <figcaption data-title="Multimedia and the World Wide Web" certification="yes">Nighthawk</figcaption>
        </figure>
   
        <figure>
            <img src="images/USA.png" height="150em">
            <figcaption data-title="Multimedia and the World Wide Web" certification="yes">Nighthawk</figcaption>
        </figure> 
  
        <figure>
            <img src="images/Functional-movement.jpg" height="150em">
            <figcaption data-title="Multimedia and the World Wide Web" certification="yes">Nighthawk</figcaption>
        </figure>
    </div>