【技巧】歪脑筋优化flexbox瀑布流布局方案

shmily 发布于2019-08-01 17:32 / 2956人阅读

摘要：现成的布局方式布局，具有等分布局的能力，如图问题但是底部我们并不想如此等分，我们更希望可以同上一排对齐方案其实很简单，我们只要在后面加入一些等宽但是占高为等隐藏元素即可轻松实现。

效果先行

需求

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

css现成的布局方式

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

问题

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

方案

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

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

.empty {
    visibility: hidden; 
}

完整demo代码

【JSFiddle地址】
https://jsfiddle.net/zwwill/43qnjxyL/



    
    并排等分，单排靠左最齐布局
    


    
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12  
        empty
        empty
        empty
        empty
        empty
        empty
        empty
        empty
        empty

云服务器 GPU云服务器 java流布局只显示优化技巧 Lua性能优化技巧服务器优化方案

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51204.html

【技巧】歪脑筋优化flexbox瀑布流布局方案

摘要：现成的布局方式布局，具有等分布局的能力，如图问题但是底部我们并不想如此等分，我们更希望可以同上一排对齐方案其实很简单，我们只要在后面加入一些等宽但是占高为等隐藏元素即可轻松实现。效果先行 showImg(https://segmentfault.com/img/remote/1460000016787621?w=1836&h=875); 需求 showImg(https://segm...

lentoo 2019-08-29 13:21 评论0 收藏0
CSS及布局

摘要：经过半年的打磨，正式发布，主要是新增了一些常用组件，并使用命名，为接下来的微信小程序开发做好准备。这两种方式实现的瀑布流式布局均支持首屏和网页窗口大小改变时的列数自适应。主要是对于标准里的布局方式草案中的布局方式进行一些总结。一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看...

jaysun 2019-08-29 14:04 评论0 收藏0
小程序之图片瀑布流（最全实现方式，额外加送懒加载）

摘要：完整代码请戳我们回到小程序，此时接口返回的数据如下可以看到每个图片都有高度了，接下来我们实现瀑布流布局，等下，我们搞下瀑布流布局的懒加载，关于小程序的懒加载，猛戳了解更多。效果图来来来，看啊看，外面的世界多好看， showImg(https://segmentfault.com/img/remote/1460000014887454?w=371&h=580); 效果图展示的是瀑布流...

rubyshen 2019-08-22 17:17 评论0 收藏0
PC端CSS布局汇总

摘要：因为端和移动端布局差异较大，所以我将两端布局分开讲，本文章将针对端的布局进行讲解，以下代码只写关键代码。为了提高网页性能，考虑到，表格元素尽量少用，有其他选择的情况尽量用其他布局。前言此文章是解剖CSS布局原理的续集，之前那篇文章讲的都是理论，本文章讲具体的实例，根据自己对布局的理解与开发经验分为以下几类。因为PC端和移动端布局差异较大，所以我将两端布局分开讲，本文章将针对P...

zhangxiangliang 2019-08-29 13:55 评论0 收藏0