英文:
How to flex-wrap from the bottom of the container up?
问题
我想要向容器添加不同数量的div，并让它们按照'gravity'对齐，即底部行首先填满，然后是下一行，而顶行可能不完整。
这基本上是标准flex-wrap的反向，但我似乎找不到如何实现它。
我正在使用：
display: flex;
flex-wrap: wrap;
align-content: flex-end;
但不完整的行仍然在底部。
需要使用JavaScript吗？
感谢任何指点 
英文:
I want to add a varying number of divs to a container, and have them align to 'gravity', as in the bottom row fills up first, then the next row, and the top row may be incomplete.
it's basically a reverse of the standard flex-wrap, but I don't seem to be able to find how to do it.
I'm doing:
display: flex;
flex-wrap: wrap;
align-content: flex-end;
but the incomplete row is still on the bottom.
Is javascript going to be necessary?
Any pointers appreciated
答案1
得分: 0
你需要使用 wrap-reverse 而不是 wrap。
section {
display: flex;
flex-wrap: wrap-reverse;
gap: 20px;
}
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
英文:
You need to use wrap-reverse instead of wrap.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
section {
display: flex;
flex-wrap: wrap-reverse;
gap: 20px;
}
div {
width: 100px;
height: 100px;
background-color: red;
}
<!-- language: lang-html -->
<section>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</section>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论