CSS 实现瀑布流布局(display: flex)
- 本例使用 CSS flex 实现瀑布流布局
- 关键点,横向 flex 布局嵌套多列纵向 flex 布局,使用了 vw 进行自适应缩放
CSS 实现瀑布流布局(column-count)
- 本例使用 CSS column 实现瀑布流布局
- 关键点,
column-count
-- 元素内容将被划分的最佳列数 - 关键点,
break-inside
-- 避免在元素内部插入分页符
CSS 实现瀑布流布局(display: grid)
+本例使用 CSS grid 实现瀑布流布局
- 使用
grid-template-columns
、grid-template-rows
分割行列 - 使用
grid-row
控制每个 item 的所占格子的大小