Flex Box Media Query Difficulté

Question

De min-largeur de 769px à 1025px, je veux le 3ème chiffre sur une nouvelle ligne tandis que les premières et secondes figures restent sur la ligne supérieure occupant un espace égal. J'essaie des boîtes flexibles en CSS. Comment puis-je faire fonctionner ça?

<div class="mid-col-section-2"> 
<figure><a href="#"><img src="images/landscape-maintenance.jpg" alt="landscape" height="300"><figcaption>Landscape Maintenance</figcaption></a></figure> 
<figure><a href="#"><img src="images/landscape-design.jpg" alt="landscape" height="300"><figcaption>Landscape Design</figcaption></a></figure> 
<figure><a href="#"><img src="images/masonry-design.jpg" alt="landscape" height="300"><figcaption>Masonry Design</figcaption></a></figure> 

.mid-col-section-2 { 
    display: flex; 
    flex-direction: column; 
} 

.mid-col-section-2 figure a { 
    color: black; 
} 

figcaption { 
    text-align: left; 
} 

@media (min-width: 1025px){ 

    .mid-col-section-2 { 
    flex-direction: row; 
    justify-content: space-between; 
    padding: 10px 60px 10px 60px; 
    } 

    figcaption { 
    text-align: center; 
    } 

    .mid-col-section-2 figure { 
    padding: 15px 0 15px 0; 
    } 

} 

Answer 1

Il semble que vous pouvez rafraîchir sur les propriétés de ēno. Vous jetez beaucoup là-dedans que vous ne voulez probablement pas.

Je révisé votre balisage depuis la balise <figure> a des styles par défaut qui lui est appliquée par le navigateur:

<div class="mid-col-section-2"> 
    <div class="mid-section"> 
     <img width="100%" src="http://jonvilma.com/images/landscape-3.jpg" alt="landscape"><figcaption>Landscape Maintenance</figcaption> 
    </div> 
    <div class="mid-section"> 
     <img width="100%" src="http://jonvilma.com/images/landscape-3.jpg" alt="landscape"><figcaption>Landscape Design</figcaption> 
    </div> 
    <div class="mid-section"> 
     <img width="100%" src="http://jonvilma.com/images/landscape-3.jpg" alt="landscape"><figcaption>Masonry Design</figcaption> 
    </div> 
</div> 

Je tondu votre CSS:

@media (min-width: 769px) and (max-width: 1025px){ 
    .mid-col-section-2 { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: space-between; 
    } 

    .mid-section { 
    margin: 0; 
    width: 45%; 
    } 

Voici le résultat: https://jsfiddle.net/qdoxL23p/embedded/result/