当前位置: 首页 > Web前端 > CSS

瀑布流的纯css实现(多列多列和flex布局)

时间:2023-03-31 12:23:35 CSS

瀑布流布局还是很吸引人的。最近看到实现瀑布流的实践。记录在这里,特别是,感觉瀑布流的flexLayout实现还是有点懵,现在可以理解它的原理了gap设置列间距,column-width设置每列的宽度,也设置break-insidein子容器以防止多列布局、分页媒体和多区域上下文中的意外中断。break-inside属性值是自动指定的,既不强制也不禁止元素内的分页/分列。avoid指定避免元素内的分页符。avoid-page指定避免在元素内分页。avoid-column指定避免元素内的分栏符。avoid-region指定避免元素内的区域中断。截取的部分,可以自己填充/*html文件*/握住左手保护你

握住左手保护你
选择你起来你的左手在保护你握住左手保护你握住左手保护你/*cssStyle*/body{background:#e5e5e5;}/*瀑布流外层*/#root{margin:0auto;宽度:1200px;列数:5;列宽:240px;列间距:20px;}/*每列图像包含图层*/.item{margin-bottom:10px;/*防止在多列布局、分页媒体和多区域上下文中意外中断*/break-inside:avoid;背景:#fff;}.item:hover{box-shadow:2px2px2pxrgba(0,0,0,.5);}/*image*/.itemImg{width:100%;vertical-align:middle;}/*图像下的信息层*/.userInfo{padding:5px10px;}.avatar{vertical-align:middle;宽度:30px;高度:30px;border-radius:50%;}.username{margin-left:5px;text-shadow:2px2px2pxrgba(0,0,0,.3);}2.Flex布局实现瀑布流。将外层设置为行布局,然后设置一个容器并将其设置为列布局。它将列作为一个整体,然后对列进行划分。通过在列中固定宽度来实现/*html文件(仅捕获两列布局)*/握住左手保护你握住左手保护你左手保护你握住左手保护你握住左手保护你握住左手保护你握住左手保护你左手保护你握住左手保护你握住你的左手保护你握住左手保护你握住左手保护你握住你的左手保护你/*css文件*/body{background:#e5e5e5;}#root{display:flex;弹性方向:行;保证金:0自动;宽度:1200px;}.itemContainer{边距-右边:10px;弹性方向:列;宽度:240px;}.item{底部边距:10px;background:#fff;}.itemImg{width:100%;}.userInfo{padding:5px10px;}.avatar{vertical-align:middle;宽度:30px;高度:30px;border-radius:50%;}.username{margin-left:5px;文字阴影:2px2px2pxrgba(0,0,0,.3);}经过实践,发现纯css实现的瀑布流只能逐列排列,所以还是需要用js来实现瀑布流,更符合我们常见的瀑布流。我正在努力学习。如果对你的学习有帮助,欢迎留言打分(点赞^_^)往期好文推荐:webpack打包(附面试题)画三角setInterval和setTimeout