Skip to content

CSS 实现瀑布流布局(display: flex)

  • 本例使用 CSS flex 实现瀑布流布局
  • 关键点,横向 flex 布局嵌套多列纵向 flex 布局,使用了 vw 进行自适应缩放

CSS 实现瀑布流布局(column-count)

  • 本例使用 CSS column 实现瀑布流布局
  • 关键点,column-count -- 元素内容将被划分的最佳列数
  • 关键点,break-inside -- 避免在元素内部插入分页符

CSS 实现瀑布流布局(display: grid)

+本例使用 CSS grid 实现瀑布流布局

  • 使用 grid-template-columnsgrid-template-rows 分割行列
  • 使用 grid-row 控制每个 item 的所占格子的大小