效果先行

需求

在大量“不定宽”元素并排的布局模式下，上图是我们想要的最佳布局 但是FlexBox布局虽然枪弹但并不能完全呈现以上布局，于是我们需要结合FlexBox作下小的改动即可实现。

css现成的布局方式

Flex布局，具有等分布局的能力，如图

问题

但是底部我们并不想如此等分，我们更希望可以同上一排对齐

方案

其实很简单，我们只要在后面加入一些等宽但是占高为0等隐藏元素即可轻松实现。 如图：

至于【empty】元素的数量需要不小于单行最多元素的数量即可， 最后我们将empty设置隐藏即可

.empty {    visibility: hidden; }复制代码

完整demo代码

【codepen 演示地址】

    
                
    
        
     1        
     2        
     3        
     4        
     5        
     6        
     7        
     8        
     9        
     10        
     11        
     12          
     empty        
     empty        
     empty        
     empty        
     empty        
     empty        
     empty        
     empty        
     empty    
    
复制代码

转载请标明出处

作者： 木羽 zwwill

首发地址：