效果先行

需求


在大量“不定宽”元素并排的布局模式下，上图是我们想要的最佳布局
但是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. 11）const

    const修饰一个  变量   为只读 : 然后 我再 a=: 这样写就是不行. 其实这个知识点主要考察    指针变量  指针指向的内存   是两个概念 char buf[]="dhasl ...

  2. 网络流dinic板子

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

  3. 服务端向客户端推送消息技术之websocket的介绍

    websocket的介绍 在讲解WebSocket前,我们先来看看下面这种场景,在HTTP协议下,怎么实现. 需求: 在网站中,要实现简单的聊天,这种情况怎么实现呢?如下图: 当发送私信的时候,如果要 ...

  4. 关于dubbo接口性能测试

      最初的压测这个dubbo接口有三种思路: .第一种就是基于业务,比如注册业务,注册成功后,会发送短信消息到用户手机,通过业务调用消息服务,最容易实现,但是业务瓶颈最大导致测试结果不准 .第二种是通 ...

  5. Vue创建项目及基本语法 一

    目录 目录: 一.创建Vue项目 0.使用环境要求及说明 1.使用命令创建项目 2.启动项目 二.简单指令 1.变量: 2.动态绑定变量值 3.v-once指令 4.v-html解析html 5.v- ...

  6. 实战_1：在Eclipse中新建RCP项目

    (1)file => New => Plug-in Project  (2) 指定项目名称 => next source folder: 源码路径 Output folder:编译后 ...

  7. fscanf使用心得

    好久没碰C语言了.从现在开始,要开始刷题了. (1)int fscanf( FILE* stream, const char* format, ... ); https://www.programiz ...

  8. spring security梳理

    核心服务:AuthenticationManager,UserDetailsService和AccessDecisionManager The AuthenticationManager, Provi ...

  9. Nginx笔记：支持对用户提交URL和服务的URL不一致时，保持对POST提交的支持

    用户访问的URL和服务的URL不一致,需要对URL修改,同时使用的是POST提交方式 location ~* ^/portalproxy/([-]*)/portal$ { #rewrite '^/po ...

  10. 吴裕雄--天生自然python学习笔记：Python3 错误和异常

    语法错误 Python 的语法错误或者称之为解析错,是初学者经常碰到的,如下实例 >>>while True print('Hello world') File "< ...