html - Flex Box 媒体查询难​​度

Question

从 769px 的最小宽度到 1025px，我希望第三个数字在新行上，而第一和第二个数字保留在顶行，占用相等的空间。我正在尝试在 CSS 中使用 flexbox 。我如何让它工作？

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