Html 将未完成的行放在顶部

我做了很多事情。这些内容类似于文本（内联、流动和换行），只是它们均匀地展开以占用行上的所有可用空间。但我有一个问题：

我希望它看起来像这样：

---

我该怎么做？调整

flex-grow

和

width

不会有帮助，因为我不知道该应用于哪个框<代码>弹性方向：行反转将切换内容，但不会切换布局。

我意识到通过制作示例图像可以实现这一点。旋转

---

如果将

transform:rotate（180deg）

应用于flex容器和对象，则可以在颠倒布局的同时正确显示其内容。标记确实需要更改，以便将内容向后放入标记中（否则，由于转换，第一个内容将位于底部）。

不要太依赖浏览器进行的自动计算。

看看我创建的方法：

考虑到您没有给出

边距

，

填充

和

边框

，用于：

• 连续两项，弹性基础为50%-34%
• 3项，弹性基础为33%-26%
• 4项，弹性基础为25%-21%，依此类推

HTML:

---

这些盒子是什么？Divs？我建议使用“html”变量并在同一位置逐行“插入”html内容，直到所有行都完成。这应该把短线作为第一行显示。@KashishArora Things。任何块级元素都应该相同。@user3629249什么？我们这里讨论的是CSS…你想调整第一行而不是最后一行吗？当窗口变大或变小时，每行的内容都会改变。因此，这将是困难的。

<div>
<div class="wide"></div>
<div class="wide"></div>
<div class="wide"></div>

<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
</div>

body > div {
    background-color: #90a; margin: 4px; padding: 2px;
    display: flex;
    flex-wrap: wrap;
}
body > div > div {
    background-color: #af3; margin: 4px;
    height: 100px;
    flex-grow: 1;
    flex-basis: 20%;
}
body > div > div.wide {
    flex-basis: 30%;
}