效果先行

需求


在大量“不定宽”元素并排的布局模式下，上图是我们想要的最佳布局
但是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. 八、linux-mysql的mysql主从复制原理和实战

    1.mysql主从复制介绍 mysql支持单向.双向.链式级联.实时.异步复制,在复制过程中,一台服务器充当主服务器(Master),而一个或多个其它服务器充当从服务器(Slave). 复制:单向同步 ...

  2. IP命令介绍

    ip指令可以显示或操作路由.网络设备.设置路由策略和通道 1.语法 ip [选项]  Object  COMMAND [help] Object对象可以是: link  网络设备.addr 设备的协议 ...

  3. spring security在异步线程的处理

    https://spring.io/guides/topicals/spring-security-architecture 在异步线程中使用SecurityContextHolder , 需要将父线 ...

  4. SCI|EI|ISTP|万方|istic|NSTL|CASTD|CNKI|nlc|ethesys|CALIS|CETD|proquest|NDLTD|中国科学院学位论文检索系统|学位论文

    BD AC D 三大检索指的是:SCI(科学引文索引 ).EI(工程索引 ).ISTP(科技会议录索引 ) 即Science Citation Index.Engineering Index.Conf ...

  5. FPGA的存储方式大全

    好的时序是通过该严密的逻辑来实现的.http://blog.csdn.net/i13919135998/article/details/52117053介绍的非常好 有RAM(随机存储器可读可写)RO ...

  6. list split批量处理

    <dependency> <groupId>org.apache.commons</groupId> <artifactId>commons-colle ...

  7. Qt 添加Includes、Libraries库

    1 #------------------------------------------------- # # 加载相机SDK-Includes-Libraries # #------------- ...

  8. ionic3懒加载IonicPage使用报错

    ionic3.X版本有不少亮点.作为从angular1到ionic1.ionic2一直用它们开发单页面应用的使用者来说,一直存在的一个痛点就是,将整个项目作为网页不打包成app的话,第一次加载时间太长 ...

  9. 是谁收购了被谷歌私藏7年之久的Zagat？

    国内餐饮行业的风口似乎总是执着于"价格"上,无论是天天搞特价的外卖,还是优惠不停歇的团购网站,都将"价格"当做了竞争的杀手锏.即使是网红奶茶.甜品之类的,也是将 ...

  10. response读取图片+下载图片

    读取图片 import java.io.FileInputStream; import java.io.IOException; import java.io.InputStream; import ...