Flex Box媒體查詢難​​度

Question

從769px的最小寬度到1025px，我希望第三個數字放在一個新的行上，而第一個和第二個數字保留在佔據相等空間的第一行上。我試圖在CSS中彈出框。我如何得到這個工作？

<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

好像你可能要刷上Flexbox的性能。你在那裏扔了很多，你可能實際上並不想要。

我修改您的標記，因爲<figure>標籤已經由瀏覽器應用到它的默認樣式：

<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> 

然後我收拾你的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%; 
    } 

這裏的結果：https://jsfiddle.net/qdoxL23p/embedded/result/