css + 瀑布流 + flex 布局

高度不一致盒子，左右排列均分容器。效果图如下。

html代码：

<div class="box"><div class="red item"></div><div class="yellow item"></div><div class="purple item"></div><div class="green item"></div></div>

css代码：

.box {width: 400px;column-count: 3;flex-flow:column wrap;background-color: aliceblue;}.item {width: 33.33;flex-grow: 1;break-inside: avoid-column; // }.red {height: 400px;background-color: red;}.yellow {height: 200px;background-color: yellow;}.purple {height: 300px;background-color: purple;}.green {height: 300px;background-color: green;}

一定要子元素的css样式，设置

break-inside: avoid-column; //

否在你回看到换行组件被截掉的情况。

多加几个字元素，就是以下效果：

<div class="box"><div class="red item"></div><div class="purple item"></div><div class="yellow item"></div><div class="purple item"></div><div class="green item"></div><div class="purple item"></div><div class="yellow item"></div><div class="purple item"></div></div>

css + 瀑布流 + flex 布局相关推荐

css基础精华---Flex 布局教程：实例篇
转载地址:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html http://www.ruanyifeng.com/blog/2015/0 ...
html流式布局插件,Jquery瀑布流网格布局插件
插件描述:一款简单且高度可定制的jQuery瀑布流网格布局插件.通过该瀑布流网格插件你可以动态添加和删除各种尺寸的图片,定义图片宽度,设置网格的列数,或使用流式布局方式,甚至还可以通过URL动态添加图 ...
瀑布流式页面布局_微信小程序——实现简单的瀑布流式布局
写页面时,考虑到美观,良好的用户体验,对于内容的展示我们经常会用到瀑布流式布局,那么如何实现一个简单的瀑布流呢? 瀑布流式布局原理:遍历数组判断奇偶性,然后分左右排布,左右两边代码基本一致直接上代 ...
一小时，学习掌握瀑布流页面布局
什么是瀑布流瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.其实瀑布流的特点就是参差不齐的排 ...
【转】关于WaterFall瀑布流式布局的性能优化
市面上已存在的瀑布流式布局的网站: 拼范网:http://www.pinfun.com/ 迷尚网:http://www.mishang.com/ 凡客达人:http://star.vancl.com/ ...
相片堆叠瀑布流网格布局动画效果
介绍: 一款效果超酷堆叠相片转瀑布流网格布局动画效果设计.该效果的灵感来源于takeit网站,它上面的一组堆叠相片在点击按钮或向下滚动鼠标时,会动画转换为网格瀑布流布局网盘下载地址: http:// ...
css 弹性盒子 flex布局
目录 css弹性盒子flex 布局什么是flex 常见父项属性概念与案例主轴与侧轴 flex-direction设置主轴的方向 justify-content 设置主轴上的子元素排列方式 fle ...
动态瀑布流网页布局 Jquery 源码
动态瀑布流网页布局jQuery代码,效果超酷,自适应网页宽度,动态缩略图排列效果, 本代码包含两种演示效果, 一种是缩略图布局效果一种是文字布局效果下载地址: http://download.cs ...
什么是瀑布流布局？瀑布流式布局的优缺点
瀑布流又称瀑布流式布局,是一种多列等宽不等高的一种页面布局方式. 视觉表现为参差不齐的多栏布局.随着页面滚动条向下滚动,这种布局会不断加载数据并附加至当前的尾部. 是一种多列等宽不等高的一种页面布局方 ...

css + 瀑布流 + flex 布局

css + 瀑布流 + flex 布局相关推荐

最新文章

热门文章