我的 class flex wrap 没有应用到 div 元素。

huangapple go评论78阅读模式
英文:

My class flex wrap is not apply to div item

问题

你的代码中使用了Bulma CSS框架,但是 flex-wrap: wrap-reverse; 属性可能不会按预期工作,因为Bulma可能覆盖了一些默认样式。要解决这个问题,你可以尝试以下步骤:

  1. 确保你已经正确导入了Bulma框架的CSS文件和Font Awesome库,你的代码中似乎已经包括了这些。

  2. 检查你的HTML结构,确保没有其他CSS规则或JavaScript代码影响了 #mr 元素的 flex-wrap 属性。

  3. 尝试直接在 #mr 元素上添加样式 flex-wrap: wrap-reverse;,看看是否起作用。

  4. 如果问题仍然存在,可以尝试使用自定义的CSS样式来覆盖Bulma的样式,以确保 flex-wrap: wrap-reverse; 生效。

希望这些步骤可以帮助你解决问题。如果你需要更多帮助,请提供更多关于问题的信息。

英文:

I have little issue with Flex wrap, my code is like this:

<!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>

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

What am I doing wrong? Can this be up to Bulma CSS or I miss something? Why this class flex-wrap: wrap-reverse; doesn't work? Also, here is my fiddle https://jsfiddle.net/kv3gfs4r/1/

答案1

得分: 1

这有效。当您调整窗口大小并且容器不完全可见时,它按照应该的方式工作。我会说它从底部开始并包装到顶部,所以当需要包装时,它只是从底部写到顶部。

当然,还有flex-direction: row-reverse,它会颠倒每个元素的顺序。

请参考您想要实现的目标。

英文:

It works. When you resizes the window and container is not fully visible it works as it should. I would say it starts from bottom and wrap to the top so when wrap is needed it just writes from the bottom to top.

there is of course flex-direction: row-reverse that that would reverse the order of every element.

Please refer to what do you want to accomplish.

huangapple
  • 本文由 发表于 2020年1月3日 21:21:20
  • 转载请务必保留本文链接:https://go.coder-hub.com/59579324.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定