瀑布流css实现

时间:2021-6-11 作者:qvyue

父元素设置

.container{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;

-moz-column-gap:30px; /* Firefox */
-webkit-column-gap:30px; /* Safari and Chrome */
column-gap:30px;
}

flex布局实现
父元素:display:flex;横向排列
flex-flow:column wrap 使其换行
设置 height: 100vh 填充屏幕的高度,来容纳子元素。
每一列的宽度可用 calc 函数来设置,
即 width: calc(100%/3 – 20px)。分成等宽的 3 列减掉左右两遍的 margin 距离

        .container {
          display: flex;  
          flex-flow:column wrap;
          height: 100vh;
        }
        .item {
            margin: 10px;
            width: calc(100%/3 - 20px);
        }
        .item img{
            width: 100%;
            height:100%;
        }
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。