【技巧】歪脑筋优化flexbox瀑布流布局方案
效果先行
需求
在大量“不定宽”元素并排的布局模式下，上图是我们想要的最佳布局
但是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瀑布流布局方案的更多相关文章
- flexbox实现不等宽不等高的瀑布流布局
第一次做不等宽不等高的瀑布流布局,刚开始企图用ccs3的column属性+flexbox来实现,瞎捣鼓半天都没有能弄好, 弱鸡哭晕在厕所(┬＿┬),气的午饭都没有吃. 后来逼着自己冷静下来,又捣鼓了1 ...
- jquery实现简单瀑布流布局
jquery实现简单瀑布流布局 是开头都会说的原理 瀑布流布局有两种,一种是固定列,一种是非固定列.在此主要记述第一种的实现. 固定列的特征是:无论页面如何缩放,每行的总列数都一致. 一行4列的瀑布流 ...
- jquery实现简单瀑布流布局（续）：图片懒加载
# jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...
- vuejs实现瀑布流布局（三）
前面写过vuejs实现的瀑布流布局,<vuejs实现瀑布流布局(一)>和<vuejs实现瀑布流布局(二)>也确实实现了瀑布流布局,但是这个是基于SUI-Mobile实现的无限滚 ...
- 【CSS】瀑布流布局的两种方式：传统多列浮动和绝对定位布局
传统多列浮动 各列固定宽度,并且左浮动: 一列中的数据块为一组,列中的每个数据块依次排列即可: 更多数据加载时,需要分别插入到不同的列上: 优点: (1)布局简单,应该说没啥特别的难点: (2)不用明 ...
- 手摸手，带你实现移动端H5瀑布流布局
移动端瀑布流布局是一种比较流行的网页布局方式,视觉上来看就是一种像瀑布一样垂直落下的排版.每张图片并不是显示的正正方方的,而是有的长有的短,呈现出一种不规则的形状.但是它们的宽度通常都是相同的 因为移 ...
- JS瀑布流布局
好久没有更新博客喽,今天来说一个瀑布流布局. 瀑布流在很多网站已有很多,现在只说一下简单的实现原理吧, 1.计算一行可以排放几个元素 2.建立一个数组用于存放第一行的每个元素的高度. 3.得到数组中的 ...
- CSS3学习总结——实现瀑布流布局与无限加载图片相册
首先给大家看一下瀑布流布局与无限加载图片相册效果图: 一.pic1.html页面代码如下: <!DOCTYPE html> <html> <head> <me ...
- myWaterfall - jQuery瀑布流布局插件
myWaterfall - jQuery瀑布流布局插件 Demo http://jsfiddle.net/q3011893/p5k2ogy8/embedded/result,html,css,js/ ...
随机推荐
- 吴裕雄--天生自然C语言开发：排序算法
#include <stdio.h> void bubble_sort(int arr[], int len) { int i, j, temp; ; i < len - ; i++ ...
- 007.前端开发知识，前端基础CSS（2020-01-28）
一.布局 一列固定宽度且居中 两列左窄右宽型 通栏平均分布型 1.一列固定宽度且居中布局<body> .top+.banner+.main+.footer 按Tab键,得到下框中代码 &l ...
- 透过微软研究院在“数据中心网络”的重大进展看SIGCOMM 2013
2013" title="透过微软研究院在"数据中心网络"的重大进展看SIGCOMM 2013"> 编者按:于8月12日至16日在香港举行的SI ...
- 1088. Rational Arithmetic (20)
1.注意在数字和string转化过程中,需要考虑数字不是只有一位的,如300转为"300",一开始卡在里这里, 测试用例: 24/8 100/10 24/11 300/11 2.该 ...
- 因为AI，所以爱
作为技术驱动型公司 自我颠覆的核心就是技术上有所突破 2019技术奇点大会上,创始人行在提出 「未来,大数据和人工智能 将成为商业升级的智能发动机」 这与我们的使命不谋而合 时间退回到2016年的冬天 ...
- 吴裕雄--天生自然 JAVASCRIPT开发学习：对象 实例（2）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Python--继承、封装、多态
大概每个人在学生时代开始就使用Java了,我们一直在学习Java,但Java中总有一些概念含混不清,不论是对初级还是高级程序员都是如此.所以,这篇文章的目的就是弄清楚这些概念. 读完本文你会对这些概念 ...
- JavaEE基础：过滤器、监听器、拦截器，应用...
写在前面说起Java和C++,很容易想到让人疯狂的指针,Java使用了内存动态分配和垃圾回收技术,让我们从C++的各种指针问题中摆脱出来,更加专心于业务逻辑,不过如果我们需要深入了解java的JVM相 ...
- RHCE考试（Linux7）
博主本人平和谦逊,热爱学习,读者阅读过程中发现错误的地方,请帮忙指出,感激不尽 一.环境模拟 * server0.example.com :172.25.0.11 * desktop0.example ...
- 解密优秀博士成长史 ——微软亚洲研究院首届博士生学术论坛Panel讨论经验总结
--微软亚洲研究院首届博士生学术论坛Panel讨论经验总结" title="解密优秀博士成长史 --微软亚洲研究院首届博士生学术论坛Panel讨论经验总结"> 编者 ...