duzhihao
V2EX  ›  问与答

一个困扰已久的 flex 问题

  •  
  •   duzhihao · May 15, 2019 · 1721 views
    This topic created in 2728 days ago, the information mentioned may be changed or developed.

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

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

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

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

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

    6 replies  •  2019-05-16 11:09:37 +08:00
    dreasky
    dreasky
    May 16, 2019
    1
    在后面多加上 N-1 个不可见的元素,N=每行元素个数
    DowneyLam
    DowneyLam
    May 16, 2019
    2
    ul:after{
    DowneyLam
    DowneyLam
    May 16, 2019
    3
    ul:after{content:'';width:xx px}
    duzhihao
    duzhihao
    OP
    May 16, 2019 via iPhone
    4
    @DowneyLam 我已经在题干说过这种方法了。这种只对一行 3 个的时候有用
    duzhihao
    duzhihao
    OP
    May 16, 2019 via iPhone
    5
    @dreasky 对于数据数量不可控的情况下这种是很麻烦的
    lijunbo
    lijunbo
    May 16, 2019
    6
    每行单独一个 flex ?
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   5107 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 37ms · UTC 08:22 · PVG 16:22 · LAX 00:22 · JFK 03:22
    ♥ Do have faith in what you're doing.