关于 flex 布局的困惑

[andyskaura]

现象是 flex 轴线上始终只能有一个元素，导致区域填不满，有没有什么好的方法指点一下。 要求 只用一个 flex 盒子，需要 item 的 order 做排序。

在线编辑： https://codesandbox.io/p/sandbox/test-flex-9j8psr

[andyskaura]

[liuhuihao]

用 float ，别用 flex

[dongtingyue]

1 和 2 是同一行。。。。

[EJW]

2 和 3 写在一个 div 里？

[iOCZS]

flex 不支持瀑布流

[Drool]

感觉 grid 更方便

[codehz]

首先 grid layout 也支持 order...

[MRG0]

我正在做这个玩意，flex 无解，高度较小的 div 会独占那个空间，不能往下在塞东西，要么 grid ，要么 Vue Grid Layout

[superedlimited]

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout

[codehz]

<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
你这种布局用 grid 几秒搞定
.container {
display: grid;
gap: 5px;
grid-template-columns: 1fr 1fr;
}

.item:first-child {
grid-row: 1 / span 2;
}
.item {
box-shadow: 0 0 0 1px black;
}

order 也可以改顺序，不过这时候就不能用 first-child 来选择了，你需要自己在 order 为 1 的时候设置 grid row 的属性

[andyskaura]

@Drool
@codehz
@MRG0
@codehz #10

都忘了还有 grid 布局了，一直都是 flex 梭哈的，第一次遇到 flex 解决不了的情况。感谢各位哈，

[Al0rid4l]

flex 是一维的, 要么 float 要么 grid

[jaminq]

flex 只有一根轴，grid 两根