Html css-将flexbox拆分到另一行，而不是收缩？

我是新的编码，并试图建立一个小的响应网站与

我希望一行有3个，如果视口太小，它们应该放在下一行。 目前，它们只是缩小，但不进入下一行

css提供媒体查询，但我不确定如何实际使用提供的结构。。。 看到和

我自己想弄清楚，但是。。。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>

---

我自己找到了答案

我没有只添加col-3，而是添加了多个参数。 像col-3 col-3 col-md-5 col-sm-11一样使线路中断

听起来很有逻辑

---

现在它可以正常工作。

尝试将flex项目设置为flex shrink:0。这将禁用收缩功能。默认设置通常为规格中定义的“弹性收缩：1”。