flex实现横向等高流式布局

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_34518793/article/details/79963133

最近在做页面的时候,需要用到横向瀑布流布局,类似于百度图片展示页面的效果,简单看了一下,发现使用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
阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页