46.纯css实现瀑布流(flex)

效果图

HTML

复制代码
<div class="masonary">
            <div class="clumn">
                <div class="item"> 
                    <div class="item__content" style="height: 100px;background: lightblue;">1 </div> 
                    <div class="item__content" style="height: 210px;background: orange;"> 2</div> 
                    <div class="item__content" style="height: 110px;background: lightcoral;">3 </div> 
                    <div class="item__content" style="height: 170px;background: lightgray;"> 4</div> 
                    <div class="item__content" style="height: 100px;background: lightblue;">5 </div> 
                    <div class="item__content" style="height: 180px;background: lightsteelblue;">6 </div> 
                </div>
            </div>
            <div class="clumn">
                <div class="item"> 
                    
                    <div class="item__content" style="height: 100px;background: lightblue;"> 7</div> 
                    <div class="item__content" style="height: 120px;background: lightsteelblue;">8</div> 
                    <div class="item__content" style="height: 60px;background: orange;"> 9</div> 
                    <div class="item__content" style="height: 200px;background: orange;">10 </div> 
                    <div class="item__content" style="height: 100px;background: lightcoral;">11 </div> 
                    <div class="item__content" style="height: 260px;background: lightgray;">12 </div> 
                </div>
            </div>
            <div class="clumn">
                <div class="item"> 
                    <div class="item__content" style="height: 130px;background: lightcyan;">13 </div> 
                    <div class="item__content" style="height: 199px;background: orange;">14 </div> 
                    <div class="item__content" style="height: 160px;background: lightcoral;">15 </div> 
                    <div class="item__content" style="height: 146px;background: orange;">16 </div> 
                    <div class="item__content" style="height: 160px;background: lightcoral;">17 </div> 
                    <div class="item__content" style="height: 111px;background: orange;">18 </div> 
                </div>
            </div>
        </div>
复制代码

css

复制代码
.masonary{
                width: 100%;
                max-width: 1000px;
                margin: auto;
                display: flex;
                flex-direction: column;
                height: auto;
            }
            @media only screen and (min-width: 500px) { 
                .masonary { flex-direction: row; } 
            }
            
            .clumn{
                margin-left: 0.5rem;
                display: flex; 
                flex-flow: column wrap; 
                width: 100%;
            }
            @media only screen and (max-width: 500px) { 
                .clumn { width: 100%;max-width: 95%;margin: auto; } 
            }
            
            .clumn>.item>.item__content{
                margin-bottom: 0.5rem;
                color: white;
                text-align: center;
            }
复制代码

 

posted @   famCc  阅读(4883)  评论(0编辑  收藏  举报
编辑推荐:
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
阅读排行:
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
点击右上角即可分享
微信分享提示