Spectre.css - Break flexbox移到另一行，而不是缩小？

Question

我是一个编程新手，并尝试用Spectre.css建立一个小型的响应式网站。

我想要3个cards在一行，如果视口变得太小，他们应该在下一行。目前，它们只是收缩，但不会进入下一行。

Spectre.css提供了媒体查询，但我不确定如何实际使用提供的结构……请参阅Flexbox Grid和Responsive

我试着自己想办法但是..。mhhh :D

<div class="container grid-xl">
    <div class="columns">
        <div class="card column col-3"></div>
        <div class="card column col-3"></div>
        <div class="card column col-3"></div>
    </div>
</div>

Answer 1

我自己找到了答案。

我不得不添加多个参数，而不是只添加col-3。就像col-3 col-3 col-md-5 col-sm-11一样，让线断掉。

听起来很合乎逻辑。

现在它可以正常工作了。