英文:
My class flex wrap is not apply to div item
问题
你的代码中使用了Bulma CSS框架，但是 flex-wrap: wrap-reverse; 属性可能不会按预期工作，因为Bulma可能覆盖了一些默认样式。要解决这个问题，你可以尝试以下步骤：
-
确保你已经正确导入了Bulma框架的CSS文件和Font Awesome库，你的代码中似乎已经包括了这些。
-
检查你的HTML结构，确保没有其他CSS规则或JavaScript代码影响了
#mr元素的flex-wrap属性。 -
尝试直接在
#mr元素上添加样式flex-wrap: wrap-reverse;，看看是否起作用。 -
如果问题仍然存在，可以尝试使用自定义的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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论