V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
duzhihao
V2EX  ›  问与答

一个困扰已久的 flex 问题

  •  
  •   duzhihao · 2019-05-15 23:45:47 +08:00 · 1018 次点击
    这是一个创建于 2021 天前的主题,其中的信息可能已经有所发展或是发生改变。

    首先 数据是后台获取的,每行的数据可以是 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
        1
    dreasky  
       2019-05-16 07:37:46 +08:00
    在后面多加上 N-1 个不可见的元素,N=每行元素个数
    DowneyLam
        2
    DowneyLam  
       2019-05-16 09:37:02 +08:00
    ul:after{
    DowneyLam
        3
    DowneyLam  
       2019-05-16 09:37:40 +08:00
    ul:after{content:'';width:xx px}
    duzhihao
        4
    duzhihao  
    OP
       2019-05-16 10:46:21 +08:00 via iPhone
    @DowneyLam 我已经在题干说过这种方法了。这种只对一行 3 个的时候有用
    duzhihao
        5
    duzhihao  
    OP
       2019-05-16 10:47:50 +08:00 via iPhone
    @dreasky 对于数据数量不可控的情况下这种是很麻烦的
    lijunbo
        6
    lijunbo  
       2019-05-16 11:09:37 +08:00
    每行单独一个 flex ?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1205 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 23:14 · PVG 07:14 · LAX 15:14 · JFK 18:14
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.