Html 我的类flex wrap不适用于div项_Html_Css_Flexbox_Bulma

Html 我的类flex wrap不适用于div项

html css

Html 我的类flex wrap不适用于div项,html,css,flexbox,bulma,Html,Css,Flexbox,Bulma,我对Flex wrap没有什么问题，我的代码如下： <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css"> <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/a

我对Flex wrap没有什么问题，我的代码如下：

<!DOCTYPE html>
<html>

<head>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
</head>

<body>
    <section class="section">
        <div class="container">
            <div class="card">

                <div class="card-content">
                    <div class="content">
                        <div class="box">
                            <div id="mr">
                                <div class="item " id="1">1</div>
                                <div class="item " id="2">2</div>
                                <div class="item " id="3">3</div>
                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </section>

我做错了什么？这是由Bulma CSS决定的还是我错过了什么？为什么这类柔性包装：反向包装；不起作用？还有，这是我的小提琴，它能用。当您调整窗口的大小并且容器不完全可见时，它会正常工作。我会说，它从底部开始，然后包装到顶部，所以当需要包装时，它只是从底部写到顶部

当然也有灵活的方向：行反转，这将反转每个元素的顺序

请参考您想要完成的任务

.item {
    height: 50px;
    width: 50px;
    border-radius: 1rem;
    margin: 1rem .5rem;
    background: #53d5bb;
    color: rgba(255, 255, 255, 0.45);
    -webkit-box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.05);
    text-align: center;
    line-height: 50px;
    font-size: 1rem;
}

#mr {
    display: flex;
    flex-wrap: wrap-reverse;
}

.box {
    height: 400px;
}