html - 跨度内的 Div 不断相互折叠

Question

这是我正在构建的网页的链接:

https://aa21fdc571424e82b426191b66978480.codepen.website

我似乎无法解决的问题与文本段落下方的三个成就有关。这三个成就分别位于各自的 div 中，包裹在一个 span 中。

<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

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

For big screens

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

For small screens

@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;
    }

}

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