现象是 flex 轴线上始终只能有一个元素,导致区域填不满,有没有什么好的方法指点一下。
要求 只用一个 flex 盒子,需要 item 的 order 做排序。
![]() |
1
andyskaura OP |
2
liuhuihao 100 天前
用 float ,别用 flex
|
3
dongtingyue 100 天前
1 和 2 是同一行。。。。
|
![]() |
4
EJW 100 天前
2 和 3 写在一个 div 里?
|
5
iOCZS 100 天前
flex 不支持瀑布流
|
6
Drool 100 天前
感觉 grid 更方便
|
![]() |
7
codehz 100 天前
首先 grid layout 也支持 order...
|
![]() |
8
MRG0 100 天前
我正在做这个玩意,flex 无解,高度较小的 div 会独占那个空间,不能往下在塞东西,要么 grid ,要么 Vue Grid Layout
|
9
superedlimited 100 天前 via Android
|
![]() |
10
codehz 100 天前
<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 的属性 |
![]() |
11
andyskaura OP |
![]() |
12
Al0rid4l 100 天前
flex 是一维的, 要么 float 要么 grid
|
13
jaminq 66 天前 via iPhone
flex 只有一根轴,grid 两根
|