flex实现横向等高流式布局

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

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

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

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

下面是代码:查看demo




    flex实现横向等高流式布局
    
    


    
原文地址: http://blog.xuxiangbo.com/im-27.html

你可能感兴趣的:(学习笔记,前端)