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 ...
随机推荐
- Sa yo na ra
总想记点些什么. 都快忘了当初是为什么来到这里呢... 2014年10月,友人给我介绍了一门编程竞赛ACM,并给我演示了一下A+B.于是我知道了ACM的含义. 2014年12月,开始水入门题. 201 ...
- guardian keytab生成不了
vim /var/kerberos/krb5kdc/kadm5.acl 将*e改成* /etc/init.d/kadmin restart 重启kadmin
- SSIS excel2003文件导入列名显示为F1,F2 - FN
问题现象: 数据源2003版本的EXCEL文件,第一列是空白,数据是从第二列开始的.所以SSIS中用EXCEL数据源倒入这个EXCEL时,所有的列显示不出来,显示的是F1,F2 - FN. 解决方法 ...
- mysql大数据分表记录app用户的坐标数据
最近提到一个需求.需要记录app用户在使用app中的移动轨迹,即坐标值.每分钟上传一次XY坐标,有点类似跑步软件的描线轨迹. 不考虑app如何获取,反正api只要接受到坐标数据 就记录下来保存到数据库 ...
- python——线程与多线程进阶
之前我们已经学会如何在代码块中创建新的线程去执行我们要同步执行的多个任务,但是线程的世界远不止如此.接下来,我们要介绍的是整个threading模块.threading基于Java的线程模型设计.锁( ...
- the usage of map.put
这个不用要的那么详细,对于应用来说,比如举个例子: Map map = new HashMap();map.put("key","value");这样就存入了一 ...
- 【转】[特征选择] An Introduction to Feature Selection 翻译
中文原文链接:http://www.cnblogs.com/AHappyCat/p/5318042.html 英文原文链接: An Introduction to Feature Selection ...
- css学习归纳总结（三） 转
原文地址:css学习归纳总结(三) 为文档添加样式的三种方法 行内样式 行内样式是写在HTML标签的style属性里的,比如: <p style="font-size: 12px;fo ...
- GitHub的使用之新建与更新代码
一.新建仓储:注册GitHub后你就会有0.3G的免费空间,不过只能创建公开项目,这也满足代码分享的目的,我最喜欢的倒是它的代码展示方式,可以直接浏览你的代码,代码是经过高亮.添加行号处理过的,十分漂 ...
- ionic单页面应用中微信分享的问题总结
首先说一下 ionic 是单页面应用,也就是说整个项目就有一个index.html, 那么问题就就来了, 如果我们不同的页面要分享给大家的是不同的链接和图片,应该怎么去做呢? 这就是我们今天要总结的东 ...