效果先行

需求


在大量“不定宽”元素并排的布局模式下，上图是我们想要的最佳布局
但是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. 简单的使用httpclient读取网页html例子

    public void clientPost(String url) {  /* 1 生成 HttpClinet 对象并设置参数*/    HttpClient httpClient=new Http ...

  2. 4）模板输出方法和 fetch总结

    (1)fetch函数虽然在我们定义的controller中使用,但是它并不属于Controller.php文件,它属于View.php文件,因为我们的每一个控制器继承了Controller.php文件 ...

  3. 32）PHP，遍历对象的属性或者属性值

    首先是遍历属性: <?php class A{ ; ; ; function fetchAllProp(){ //遍历时,key取得属性名,value取得对应值 foreach($this as ...

  4. 网络流dinic板子

    bool bfs(){ memset(deep,0,sizeof(deep)); queue<int>que; que.push(s); deep[s]=1; while(!que.emp ...

  5. linux上部署jenkins

    http://www.pianshen.com/article/1133171043/相关jenkins链接 下载jenkins的war包:https://blog.csdn.net/Aaron_Zh ...

  6. VBA自动点击IE的浏览按钮、自动选择路径、自动关闭打开文件对话框

    VBA调用InternetExplorer操作IE浏览器,自动弹出文件选择对话框时,VBA会处于阻塞状态,你必须手工关闭文件选择对话框,VBA才能继续向后运行. 例如下面网址,就有一个文件浏览按钮: ...

  7. 《C 程序设计语言》练习1-4

    #include<stdio.h> /*当celsius=0,1,...,100时,打印摄氏温度与华氏温度对照表; 浮点数版本*/ main () { float fahr,celsius ...

  8. 微弱信号二次谐波检测的FPGA的实现-总结

    首先还是把握大的系统框架: 我要实现的部分不包括DA以及AD的转换,主要是将SSP接收到的数据送入到FIFO中,然后经过FIR带通滤波器的处理后对该信号计算幅值并做PSD,然后处理的信号经过积分够一方 ...

  9. python2下经典爬虫（第一卷）

    python2.7的爬虫个人认为比较经典在此我将会用书中的网站http://example.webscraping.com作为案例 爬虫第一步:进行背景调研 了解网站的结构资源在网站的robots.t ...

  10. c中结构体边界对齐

    原则1.普通数据成员对齐规则:第一个数据成员放在offset为0的地方,以后每个数据成员存储的起始位置要从该成员大小的整数倍开始(比如int在32位机为4字节,则要从4的整数倍地址开始存储). 原则2 ...