一个困扰已久的 flex 问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2030 天前的主题，其中的信息可能已经有所发展或是发生改变。

首先数据是后台获取的，每行的数据可以是 3 个、4 个、5 个（根据子元素的宽度情况）; 想使用 flex 布局

 ul {
 	display: flex;
 	justify-content: space-between;
 }

不同的情景子元素的宽度是不一样的，所有每行的个数也是不一样的。如果是 3 个的话可以使用


	ul::after {
        content: '';
        width: item-width;
        height: 0;
      }

但是如果是 4 个、5 个话就不行了。在尽量使用 flex 布局的情况下怎么实现呢。这是一个项目经常遇见的问题，想听听大家的看法。

6 条回复 • 2019-05-16 11:09:37 +08:00

dreasky

2019-05-16 07:37:46 +08:00

在后面多加上 N-1 个不可见的元素，N=每行元素个数

DowneyLam

2019-05-16 09:37:02 +08:00

ul:after{

DowneyLam

2019-05-16 09:37:40 +08:00

ul:after{content:'';width:xx px}

duzhihao

2019-05-16 10:46:21 +08:00 via iPhone

@DowneyLam 我已经在题干说过这种方法了。这种只对一行 3 个的时候有用

duzhihao

2019-05-16 10:47:50 +08:00 via iPhone

@dreasky 对于数据数量不可控的情况下这种是很麻烦的

lijunbo

2019-05-16 11:09:37 +08:00

每行单独一个 flex ？