效果先行

需求


在大量“不定宽”元素并排的布局模式下，上图是我们想要的最佳布局
但是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. 正则表达式awk学习（三）

    awk:格式化文本输出 gawk - pattern scanning and processing language awk:gawk的符号链接 基本用法:gawk [options] 'progr ...

  2. winfrom控件圆角

    刚好用到这个功能,看了好些例子.我就不明白,简单的一个事,一些文章里的代码写的那个长啊,还让人看么. 精简后,就其实一点,只要有paint事件的组件,都可画圆角,没有的外面套一个panel就行了. u ...

  3. SecureCRT8.1安装破解

    博主本人平和谦逊,热爱学习,读者阅读过程中发现错误的地方,请帮忙指出,感激不尽 一.安装破解 [基本信息] SecureCRT v8.x 注册机,TEAM Z.W.T 出品,MD5 = 44114b9 ...

  4. python-django框架-电商项目-首页开发_20191122

    python-django框架-电商项目-首页开发 业务背景: 用户浏览网站一定是先到首页, 没有登陆的话首页内容完全一样,而且是不经常变化的, 一段时间内,有100用户访问,就要有几个用户就要查询多 ...

  5. TPO3-2 Depletion of Ogallala Aquifer

    Estimates indicate that the aquifer contains enough water to fill Lake Huron, but unfortunately, und ...

  6. MySQL中的GIS几何函数和空间分析函数

    MySQL空间扩展不仅提供了空间数据的存储能力,而且还具备一些空间运算能力,这些功能通过MySQL内建的几何函数实现.最简单的几何函数昨天已经有所涉及,也就是转换WTK的GEOMFROMTEXT和AS ...

  7. [LC] 116. Populating Next Right Pointers in Each Node

    You are given a perfect binary tree where all leaves are on the same level, and every parent has two ...

  8. ClassNotFoundException: org.apache.commons.logging.Log

    参考: https://bbs.csdn.net/topics/392090371 omcat无法启动,报如下错误: 严重: A child container failed during start ...

  9. 在MVC模式下通过Jqgrid表格操作MongoDB数据

    看到下图,是通过Jqgrid实现表格数据的基本增删查改的操作.表格数据增删改是一般企业应用系统开发的常见功能,不过不同的是这个表格数据来源是非关系型的数据库MongoDB.nosql虽然概念新颖,但是 ...

  10. 转：ZABBIX监控H3C设备的CPU和内存使用率

      由于最近监控的H3C路由器经常出现死机现象,SNMP获取不到数据,后面检查发现是CPU使用率过高,直接导致无法处理SNMP请求,所以需求来了,怎样通过SNMP监控H3C路由器的CPU和内存使用率? ...