为什么 Flex 不包裹

Question

https://plnkr.co/edit/VurNxK9RnJ3ccHSJ?open=lib%2Fscript.js

为什么第一个 div

computer-filters

在移动视图上不占据全宽？

即使我已经为该 div 指定了 100% 宽度：

@media (min-width: 576px) {
            .abhi-flex-item {
                width: 100%;
            }

            .computer-filters {
                width: 100% !important;
                flex-grow: 1;
            }
        }

        @media (min-width: 992px) {
            .abhi-flex-item {
                width: 200px;
                height: 300px;
            }

            .computer-filters {
                display: flex;
                width: 360px;
                height: 500px;
            }
        }

我还尝试在父容器中使用 bootstrap 响应式实用程序 和 flex-sm-column 但没有帮助。 我的代码是否限制将盒子容器放入第二行？

Answer 1

将 d-flex-wrap 更改为 flex-wrap

<div class="d-flex flex-wrap">
    <div class="d-flex computer-filters">
    </div>
    <div class="d-flex flex-wrap">
    </div>
</div>