效果先行

需求


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

css现成的布局方式

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

问题

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

方案

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

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

  1. .empty {
  2.     visibility: hidden;
  3. }

完整demo代码

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

  1. <html>
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>并排等分，单排靠左最齐布局</title>
  5.     <style type="text/css">
  6.         * {
  7.             margin: 0;
  8.             padding: 0;
  9.         }
  10.         .main {
  11.             display: flex;
  12.             width: 1000px;
  13.             flex-flow: row wrap;
  14.             justify-content: space-between;
  15.             margin: 50px auto;
  16.             background-color: #ccc;
  17.             align-content: baseline;
  18.         }
  19.         .main span {
  20.             width: 132px;
  21.             height: 200px;
  22.             display: inline-block;
  23.             background-color: #666;
  24.             margin: 4px;
  25.         }
  26.         .main .emp{
  27.             height: 0;
  28.             border: none;
  29.             margin-top: 0;
  30.             margin-bottom: 0;
  31.             visibility: hidden;
  32.         }
  33.     </style>
  34. </head>
  35. <body>
  36.     <div class="main">
  37.         <span style="">1</span>
  38.         <span style="">2</span>
  39.         <span style="">3</span>
  40.         <span style="">4</span>
  41.         <span style="">5</span>
  42.         <span style="">6</span>
  43.         <span style="">7</span>
  44.         <span style="">8</span>
  45.         <span style="">9</span>
  46.         <span style="">10</span>
  47.         <span style="">11</span>
  48.         <span style="">12</span>
  49.         <span class="emp" >empty</span>
  50.         <span class="emp" >empty</span>
  51.         <span class="emp" >empty</span>
  52.         <span class="emp" >empty</span>
  53.         <span class="emp" >empty</span>
  54.         <span class="emp" >empty</span>
  55.         <span class="emp" >empty</span>
  56.         <span class="emp" >empty</span>
  57.         <span class="emp" >empty</span>
  58.     </div>
  59. </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. Docker系列三:Dockerfile

    Dockerfile是由一系列命令和参数构成的脚本,这些命令应用于基础镜像并最终创建一个新的镜像 Dockerfile由一行行命令语句组成,支持#开头的注释 Dockerfile分为四部分:基础镜像信 ...

  2. linux上安装 mysql

    一.linux 上安装 mysql 1.查看mysql是否安装 rpm -qa|grep mysql 2.卸载 mysql yum remove mysql mysql-server mysql-li ...

  3. 一、安装Docker CE

    卸载旧版本 较旧版本的Docker被称为docker或docker-engine.如果已安装这些,需要卸载以及相关的依赖项. $ sudo yum remove docker \ docker-cli ...

  4. DAG Optimal Coin Change

    题目描述 In a 10-dollar shop, everything is worthy 10 dollars or less. In order to serve customers more ...

  5. [LC] 161. One Edit Distance

    Given two strings s and t, determine if they are both one edit distance apart. Note: There are 3 pos ...

  6. 阿里云系统安装部署Freeswitch

    1.安装vim apt-get install vim 2.修改镜像源 将/etc/apt/source.list的原有源注释掉,添加下面的源: deb http://mirrors.163.com/ ...

  7. 3DMAX卸载/完美解决安装失败/如何彻底卸载清除干净3DMAX各种残留注册表和文件的方法

    在卸载3dmax重装3dmax时发现安装失败,提示是已安装3dmax或安装失败.这是因为上一次卸载3dmax没有清理干净,系统会误认为已经安装3dmax了.有的同学是新装的系统也会出现3dmax安装失 ...

  8. 4k高分屏下，chm帮助文档，api文档打开后字体过小的解决

    如图所示: 4k分辨率下,chm文件的正文部分的字体过小,这是这些网页可能使用了CSS维持字体dpi, 在普通分辨率下,可以显示正常,但在高分屏下就会显示得过小,这时我们就需要调整显示网页 的显示效果 ...

  9. LVS(注意iptables和selinux的问题)

    1.LVS(高负载) LVS(Linux虚拟服务器) Linux Virtual Server LVS集群采用IP负载均和技术和基于内容请求分发技术.调取器具有很好的吞吐率,将请求均衡的转移到不同的服 ...

  10. CentOS7下MySQL5.7的安装-RPM方式

    Installing MySQL on Linux Using RPM Packages 下载安装包 mysql下载地址:https://dev.mysql.com/downloads/mysql/ ...