内跨的div保持相互折叠

Question

以下是我正在建设的网页的链接：

https://aa21fdc571424e82b426191b66978480.codepen.website

我似乎无法解决的问题与文本段落下面的三项成就有关。这三个成就各自都在他们自己的div中，包裹在一个跨度中。

<section class="achievement_wrapper">
   <div class ="achievement" id="achievement1"><p class="achievement_text">Achievement 1</p></div>
   <div class ="achievement" id="achievement2"><p class="achievement_text">Achievement 2</p></div>
<div class ="achievement" id="achievement3"><p class="achievement_text">Self-Authoring Suite</p></div>
</section>

当我减小浏览器宽度时，我希望它们在大小有必要时折叠成一列。但是出于某种原因，无论我多么努力，我都无法实现它。当前的包装器类代码：

.achievement_wrapper {
    display: flex;
    flex-flow: row-wrap;
    align-items: flex-end;   
}

或者也许这是特定的东西搞乱了整个事情？

我希望这些在空间不足时移出到不同的行上。

Answer 1

我看到你有媒体查询，但是你有一个sintax错误

  

适用于大屏幕

@media screen and (min-width: 450px){
.achievement_wrapper {
    display: flex;
    flex-flow: row;
    align-items: flex-end;
}

  

适用于小屏幕

@media screen and (max-width: 449px){
.achievement_wrapper {
    display: flex;
    flex-flow: column;
    align-items: flex-end;
}

使用row和column值会得到您想要的结果。

建议采用移动优先方法。因此，您应该只有一个媒体查询和默认移动样式。所以你的代码应该是这样的：

.achievement_wrapper {
    display: flex;
    flex-flow: column;
    align-items: flex-end;
}

@media screen and (min-width: 450px){
.achievement_wrapper {
    display: flex;
    flex-flow: row;
    align-items: flex-end;
    }

}

希望这就是你要找的东西。如果需要，很乐意解释或帮助提供更好的解决方案。