flex实现横向等高流式布局

标签: flex 瀑布流
3人阅读 评论(0) 收藏 举报
分类:

最近在做页面的时候,需要用到横向瀑布流布局,类似于百度图片展示页面的效果,简单看了一下,发现使用flex布局可以在纯CSS实现,做一下笔记。

首先,说明几个相关知识点:

1、flex-grow。这个属性可以让内容适应容器,始终保持容器处理填满的状态。

2、object-fit: cover。这个属性是img标签的属性,效果是适当裁切图片,保证图片不被拉伸,类似于background-size:cover。

下面是代码:查看demo

<!DOCTYPE html>
<html>
<head>
    <title>flex实现横向等高流式布局</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            display: flex;
            flex-wrap: wrap;
        }
        .box:after{
            content: '';
            flex-grow: 99999; //使用伪类填充容器,防止出现最后一张图片单独占一行的情况
	}
	.imgBox{
            flex-grow: 1; //让图片始终填满一整行
            margin: 2px;
	}
	.imgBox img{
	    width: auto;
	    height: 150px;
	    object-fit: cover; //图片适应容器并且不裁切
	    min-width: 100%;
	}
    </style>
</head>
<body>
    <div class="box" id="box">
	<div class="imgBox" v-for="img in imgs">
    	    <img :src="img.src" />
	</div>
    </div>
    <script type="text/javascript">
	var data = {
	    imgs: []
	}
	for(var i=0;i<10;i++){
	    data.imgs.push({src:'img/'+(i+1)+'.jpg'});
	}
	var app = new Vue({
	    el: '#box',
	    data: data
	})
    </script>
</body>
</html>
原文地址:http://blog.xuxiangbo.com/im-27.html
查看评论

css3 flex流动自适应响应式布局样式类

今天在做一个水平居中的div内部元素贴边水平均匀布局(有点绕,直接看图吧), 一开始使用的都是一些比较常用的css+html方法来实现布局,感觉这样很死板(在多增加一个div,并未div设置...
  • u012763269
  • u012763269
  • 2015-08-28 15:44:27
  • 3930

CSS等高布局的6种方式

前面的话   等高布局是指子元素在父元素中高度相等的布局方式。等高布局的实现包括伪等高和真等高,伪等高只是看上去等高而已,真等高是实实在在的等高。本文将介绍边框模拟、负margin这两种伪等高以及t...
  • cometwo
  • cometwo
  • 2016-05-04 22:24:59
  • 8689

android流式布局:FlexboxLayout用法探析(一)

FlexboxLayout是google官方开源的一个可以简单快速创建具有弹性功能的流式布局,它的目的是使用我们常见的布局模式,帮我们很好的实现UI区域的比例划分,比如三列布局,可以非常简单的实现。它...
  • tabolt
  • tabolt
  • 2016-07-01 13:56:32
  • 4974

FlexBoxLayout控件做流布局

最近看到谷歌新出FlexBoxLayout,FlexBoxLayout是什么? 就是类似于 bootstrap 中的Grid栅格系统但又不相同的强大控件,接近于前端开发中弹性布局,是可以自动伸缩的弹...
  • sinat_15197693
  • sinat_15197693
  • 2016-05-16 16:20:59
  • 671

不用flex布局实现并排的div等宽等高布局

.container{ width:100%; display:table; //border-collapse:collapse; //内部div无缝隙 //border-spacing:10...
  • u011135260
  • u011135260
  • 2017-02-20 08:57:36
  • 292

流式布局之2012年语法-------------------CSS3盒模型display:flex

display:flex为display:box的增强版 box:主要是控制父容器里面子元素的排列方式、排列顺序、垂直(水平)对齐方式 box-flex:增强功能----------主要让子容器可修改...
  • u014071104
  • u014071104
  • 2016-03-31 01:18:39
  • 995

轻松实现两栏布局:左右DIV等高、内容自适应屏幕高度

test body{ background:#ccc; overflow-y:scroll; } #wr...
  • malinjie66
  • malinjie66
  • 2013-07-12 00:33:54
  • 1560

两列或多列等高布局实现

1、用table布局,这里不多说。。。 2、正负内外边距实现         左列         中列         右列   ...
  • fb_01
  • fb_01
  • 2016-03-30 17:37:35
  • 1030

使用CSS3中的box-flex功能实现垂直等高、水平均分、比例划分布局

box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。目前box-flex属性还没有得到f...
  • u013511989
  • u013511989
  • 2015-08-18 13:28:56
  • 11186

CSS3 弹性布局弹性流(flex-flow)属性详解和实例

弹性布局是CSS3引入的强大的布局方式,用来替代以前Web开发人员使用的一些复杂而易错hacks方法(如使用float进行类似流式布局)。其中flex-flow是flex-direction和flex...
  • iefreer
  • iefreer
  • 2016-02-24 00:05:09
  • 20234
    个人资料
    持之以恒
    等级:
    访问量: 1604
    积分: 118
    排名: 122万+
    文章存档