css实现瀑布流布局

谢院柯

已于 2022-03-22 09:34:38 修改

阅读量5.4k

点赞数 1

分类专栏： css 文章标签： css

于 2020-04-30 16:42:05 首次发布

本文链接：https://blog.csdn.net/weixin_44130308/article/details/105864752

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.column 多行布局实现瀑布流

column 实现瀑布流主要依赖两个属性。
一个是 column-count 属性，是分为多少列。
一个是 column-gap 属性，是设置列与列之间的距离。

 <style>
        .box {
            margin: 10px;
            column-count: 3;
            column-gap: 10px;
        }
        .item {
            margin-bottom: 10px;
        }
        .item img{
            width: 100%;
            height:100%;
        }
 </style>
 <body>
		<div class="box">
		    <div class="item">
		        <img  src="1.jpg" alt="" />
		    </div>
		    <div class="item">
		        <img  src="2.jpg" alt="" />
		    </div>
		</div>
 </body>

2.flex 弹性布局实现瀑布流

flex 实现瀑布流需要将最外层元素设置为 display: flex，即横向排列。然后通过设置 flex-flow:column wrap 使其换行。设置 height: 100vh 填充屏幕的高度，来容纳子元素。每一列的宽度可用 calc 函数来设置，即 width: calc(100%/3 - 20px)。分成等宽的 3 列减掉左右两遍的 margin 距离。

    <style>
        .box {
          display: flex;  
          flex-flow:column wrap;
          height: 100vh;
        }
        .item {
            margin: 10px;
            width: calc(100%/3 - 20px);
        }
        .item img{
            width: 100%;
            height:100%;
        }
   </style>
   
	<body>
		<div class="box">
		    <div class="item">
		        <img  src="1.jpg" alt="" />
		    </div>
		    <div class="item">
		        <img  src="2.jpg" alt="" />
		    </div>
		</div>
	</body>

谢院柯

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
css实现瀑布流布局

1.column 多行布局实现瀑布流column 实现瀑布流主要依赖两个属性。一个是 column-count 属性，是分为多少列。一个是 column-gap 属性，是设置列与列之间的距离。 <style> .box { margin: 10px; column-count: 3; col...
复制链接

扫一扫