Изменение направления Flexbox HTML CSS

Question

У меня есть flexbox с 4 изображениями.Ниже изображение того, как оно выглядит сейчас.В настоящее время, когда я уменьшаю ширину, вы не видите четвертое изображение.

Я хочу, чтобы 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 единиц (или px или rem) используйте вместо vw и vh «просмотр единиц». Эти единицы представляют 1% от текущей ширины и высоты экрана (и вы можете использовать доли единиц, чтобы они становились бесконечно более гранулярными - например, 1.25vw), поэтому поля / border / padding / etc также будут увеличиваться / уменьшаться с Размер экрана. Чем единицы измерения отличаются от процентов? Проценты относятся к процентам от родительского размера 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>