效果先行

需求


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

css现成的布局方式

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

问题

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

方案

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

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

.empty {

    visibility: hidden;

}

完整demo代码

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

<html>

<head>

    <meta charset="UTF-8">

    <title>并排等分，单排靠左最齐布局</title>

    <style type="text/css">

        * {

            margin: 0;

            padding: 0;

        }

        .main {

            display: flex;

            width: 1000px;

            flex-flow: row wrap;

            justify-content: space-between;

            margin: 50px auto;

            background-color: #ccc;

            align-content: baseline;

        }

        .main span {

            width: 132px;

            height: 200px;

            display: inline-block;

            background-color: #666;

            margin: 4px;

        }

        .main .emp{

            height: 0;

            border: none;

            margin-top: 0;

            margin-bottom: 0;

            visibility: hidden;

        }

    </style>

</head>

<body>

    <div class="main">

        <span style="">1</span>

        <span style="">2</span>

        <span style="">3</span>

        <span style="">4</span>

        <span style="">5</span>

        <span style="">6</span>

        <span style="">7</span>

        <span style="">8</span>

        <span style="">9</span>

        <span style="">10</span>

        <span style="">11</span>

        <span style="">12</span>

        <span class="emp" >empty</span>

        <span class="emp" >empty</span>

        <span class="emp" >empty</span>

        <span class="emp" >empty</span>

        <span class="emp" >empty</span>

        <span class="emp" >empty</span>

        <span class="emp" >empty</span>

        <span class="emp" >empty</span>

        <span class="emp" >empty</span>

    </div>

</body></html>

【技巧】歪脑筋优化flexbox瀑布流布局方案的更多相关文章

  1. flexbox实现不等宽不等高的瀑布流布局

    第一次做不等宽不等高的瀑布流布局,刚开始企图用ccs3的column属性+flexbox来实现,瞎捣鼓半天都没有能弄好, 弱鸡哭晕在厕所(┬＿┬),气的午饭都没有吃. 后来逼着自己冷静下来,又捣鼓了1 ...

  2. jquery实现简单瀑布流布局

    jquery实现简单瀑布流布局 是开头都会说的原理 瀑布流布局有两种,一种是固定列,一种是非固定列.在此主要记述第一种的实现. 固定列的特征是:无论页面如何缩放,每行的总列数都一致. 一行4列的瀑布流 ...

  3. jquery实现简单瀑布流布局（续）：图片懒加载

    # jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...

  4. vuejs实现瀑布流布局（三）

    前面写过vuejs实现的瀑布流布局,<vuejs实现瀑布流布局(一)>和<vuejs实现瀑布流布局(二)>也确实实现了瀑布流布局,但是这个是基于SUI-Mobile实现的无限滚 ...

  5. 【CSS】瀑布流布局的两种方式：传统多列浮动和绝对定位布局

    传统多列浮动 各列固定宽度,并且左浮动: 一列中的数据块为一组,列中的每个数据块依次排列即可: 更多数据加载时,需要分别插入到不同的列上: 优点: (1)布局简单,应该说没啥特别的难点: (2)不用明 ...

  6. 手摸手，带你实现移动端H5瀑布流布局

    移动端瀑布流布局是一种比较流行的网页布局方式,视觉上来看就是一种像瀑布一样垂直落下的排版.每张图片并不是显示的正正方方的,而是有的长有的短,呈现出一种不规则的形状.但是它们的宽度通常都是相同的 因为移 ...

  7. JS瀑布流布局

    好久没有更新博客喽,今天来说一个瀑布流布局. 瀑布流在很多网站已有很多,现在只说一下简单的实现原理吧, 1.计算一行可以排放几个元素 2.建立一个数组用于存放第一行的每个元素的高度. 3.得到数组中的 ...

  8. CSS3学习总结——实现瀑布流布局与无限加载图片相册

    首先给大家看一下瀑布流布局与无限加载图片相册效果图: 一.pic1.html页面代码如下: <!DOCTYPE html> <html> <head> <me ...

  9. myWaterfall - jQuery瀑布流布局插件

    myWaterfall - jQuery瀑布流布局插件 Demo http://jsfiddle.net/q3011893/p5k2ogy8/embedded/result,html,css,js/ ...

随机推荐

  1. DFS-BFS（深搜广搜）原理及C++代码实现

    深搜和广搜是图很多算法的基础,很多图的算法都是从这两个算法中启发而来. 深搜简单地说就是直接一搜到底,然后再回溯,再一搜到底,一直如此循环到没有新的结点. 广搜简单地说就是一层一层的搜,像水的波纹一样 ...

  2. IMX6Q开发板Linux-QT挂载U盘及TF卡

    本文基于:迅为-iMX6开发板Linux-QT挂载U盘及TF卡 如下图所示,qt 启动之后,在超级终端中使用命令“mknod /dev/sda1 b 8 1”创建 U盘的设备节点,如下图所示. 插入 ...

  3. 2019牛客多校（第十场）F Popping Balloons —— 线段树+枚举

    https://ac.nowcoder.com/acm/contest/890/F 题意:二维平面中有n个气球,你可以横着社三法子弹,竖着射三发子弹,且横着子弹的关系是y,y+r,y+2*r,竖着是x ...

  4. C++ this指针详解（精辟）

    this 是 C++ 中的一个关键字,也是一个 const 指针,它指向当前对象,通过它可以访问当前对象的所有成员. 所谓当前对象,是指正在使用的对象.例如对于stu.show();,stu 就是当前 ...

  5. 新iPhone又要提价，苹果靠什么基业长青？

    在股神巴菲特一番煽情言论之后,苹果股价再创新高,达到187.67美元,总市值约为9450亿美元,正大踏步向着1万亿美元市值的目标前进,这是一条科技.经济.财经.社会等领域的头条新闻,遭到全球各界人士的 ...

  6. python代码覆盖率统计-coverage

    coverage.py是一个用来统计python程序代码覆盖率的工具.它使用起来非常简单,并且支持最终生成界面友好的html报告.在最新版本中,还提供了分支覆盖的功能. 官方网站: http://ne ...

  7. G1最佳实践

    示例 -Xms1550m -Xmx1550m -XX:+UseG1GC -XX:MaxGCPauseMillis=200 -verbosegc -XX:+PrintGCDateStamps -Xlog ...

  8. sqlserver 把两个sql查询语句查询出来的两张表合并成一张表

    第一个sql语句 select companyname gsmc,zb zhibiao from t_gsndzb left join t_companycode on t_gsndzb.gsbh=t ...

  9. NopCommerce上二次开发 触发器记录

    最近要在NopCommerce上二次开发. 开发也就算了,该项目的架构设计很好,但性能不可谓不低. 扯远了,为了保持项目以后升级顺利,开次开发不允许在原项目基础上大改,只能以插件形式开发…… 因一个功 ...

  10. 吴裕雄--天生自然 R语言开发学习：回归（续四）

    #------------------------------------------------------------# # R in Action (2nd ed): Chapter 8 # # ...