Flex Box媒体查询难​​度

Question

从最小宽度769px到1025px，我希望第3个数字在新线上，而第一个和第二个数字保持在顶线占据相等的空间。我在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/