flexbox实现不等宽不等高的瀑布流布局
第一次做不等宽不等高的瀑布流布局,刚开始企图用ccs3的column属性+flexbox来实现,瞎捣鼓半天都没有能弄好,
弱鸡哭晕在厕所(┬＿┬),气的午饭都没有吃.
后来逼着自己冷静下来,又捣鼓了1个小时,终于搞定了!!!长舒一口气(๑•ᴗ•๑)把代码分享给大家,希望能帮到小白:-D
最终效果如下:
html基本布局如下:
<body>
<div class="container">
<div class="box box0">
<span class="item"></span>
<div class="boxcontainer">
<div class="box box01">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
<div class="box box02">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
</div>
</div>
<div class="box box2">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
<div class="box box3">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
</div>
</body>
- css样式如下:
<style>
.container{
width: 710px;
height: 1000px;
margin: 50px auto;
background-color: #eee;
display: flex;
flex-flow:row nowrap;
justify-content:space-between;
box-sizing:border-box;
padding: 10px;
}
.box{
box-sizing:border-box;
}
.box span{
display: block;
margin-bottom: 10px;
width: 160px;
box-sizing:border-box;
}
.box0 span{
width: 330px;
height: 150px;
background-color: blue;
}
.boxcontainer{
width: 330px;
display: flex;
flex-flow:row wrap;
justify-content:space-between;
}
.boxcontainer span{
width: 160px;
background-color: orange;
}
.boxcontainer .box01 span{
height: 80px;
background-color: purple;
}
.boxcontainer .box02 span{
height: 160px;
}
.box2 span{
height: 100px;
background-color: green;
}
.box3 span{
height: 200px;
background-color: pink;
}
</style>
flexbox实现不等宽不等高的瀑布流布局的更多相关文章
- Ajax+json+jquery实现无限瀑布流布局
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- AJAX+json+jquery实现预加载瀑布流布局
宽度是一定的高度不定的瀑布流布局 也可以说是无缝拼图 当浏览器滚动到底部时候自动加载图片 加载的图片地址用json 在img.js里 ,还有正在加载动画是用 css3制作的 在ff等支持css3可以显 ...
- 获取jsp页面的宽和高
var winWidth; var winHeight; function getResult() { if(window.innerWidth) { winWidth=window.innerWid ...
- StringGrid 实例3： 本例功能: 1、修改 TStringGrid的默认宽与高; 2、添加行; 3、确认当前单元并赋值.
实例3: 本例功能: 1.修改 TStringGrid的默认宽与高; 2.添加行; 3.确认当前单元并赋值. 实例图形:
- Android中获取图片的宽和高
在Android中,我们想获取图片的宽和高应该怎么办?一.正常加载图片的方法下获取宽和高 举一个简单的例子:创建一个图片的副本 //加载原图 Bitmap bmSrc = BitmapFactory. ...
- 【转】Android 获得view的宽和高
转自:http://blog.csdn.net/yangdeli888/article/details/25405263 Android 获得view的宽和高 分类: android 技术点项目20 ...
- [BS-01] 根据字符串对象的参数自动计算用来显示该字符串的UI控件的宽和高
根据字符串对象的参数自动计算用来显示该字符串的UI控件的宽和高 1. 影响昵称Label的高和宽的因素: 字体和字号大小.文字多少.高度取决于是否固定了宽度(是否限制了最大的宽度和高度) 2. 使用 ...
- iOS 修改网络图片的大小 宽和高
//image宽和高 好用 NSString *strTemplateHTML = [NSString stringWithFormat:@"<html><head> ...
- C# 上传图片前判断上传图片的宽和高
网上找了好久没有找到... 最后百度到了这句话“由上传的HttpPostFile的InputStream创建一个Image对象,然后想怎么处置就随便你了”. HTML代码: <asp:FileU ...
随机推荐
- iOS tabBar双击事件
思路: 在tabBarController的代理方法 shouldSelectViewController 中, 通过判断tabBar选中的控制器是否是当前控制器 并 比对两次点击的时间间隔 来判断是 ...
- php总结 --- 18. 七牛云存储
第三方资源拉取 /** * 七牛云抓取文件 * @param string $url 文件URL地址 * * 参考地址:http://developer.qiniu.com/code/v6/api/k ...
- webpack和gulp的区别
Gulp应该和Grunt比较,他们的区别我就不说了,说说用处吧.Gulp / Grunt 是一种工具,能够优化前端工作流程.比如自动刷新页面.combo.压缩css.js.编译less等等.简单来说, ...
- PHP的基本排序算法
1 冒泡排序 <?php /** * 冒泡排序(从小到大) * 基本思想:两两比较相邻记录,一次循环确定一个数 * 在所有的排序算法中是最慢的,尤其当数据量较大的时候,数据小体现不出来 */ $ ...
- linux系统下静态IP的设置
首先说明:下面用的系统为:kali 4.6.0版本的哦:不同的系统是不一样的:反正吧,在ubuntu上的好多方法在kali上就不管用,并且吧,不同的ubuntu的版本也不一样的: 第一步:设置网络的I ...
- JQuery_元素属性操作
除了对元素内容进行设置和获取,通过jQuery 也可以对元素本身的属性进行操作,包括获取属性的属性值.设置属性的属性值,并且可以删除掉属性. <script type="text/ja ...
- git入门网站
http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000 git入门教程:对商业的.开源的. ...
- $.unique()去重问题
var yearArray = new Array(2009, 2009, 2010, 2010, 2009, 2010);$.unique(yearArray); 返回 2009, 2010, 20 ...
- MAC usb启动盘制作
1.从App Store 下载OS 2.磁盘工具格式化磁盘默认即可 3. 为啥截图,因为有些是不一样的,建议使用 Tab建, 未命名则是你移动U盘命名的名称. 4.完成:所有的命令完成的话, 终 ...
- OneProxy自动剔除延迟节点
在多种情况下,MySQL主从节点之间可能存在延迟.比如,主库的写入能力强于从库的写入能力.从库单线程复制.从库复制出错导致相关进程停止.为了保证数据的时效性,OneProxy提供了复制时效性检查,用于 ...