纯CSS实现横向瀑布流代码记录

<div class="container">
  <div class="item" style="height: 140px"></div>
  <div class="item" style="height: 190px"></div>
  <div class="item" style="height: 170px"></div>
  <div class="item" style="height: 120px"></div>
  <div class="item" style="height: 160px"></div>
  <div class="item" style="height: 180px"></div>
  <div class="item" style="height: 140px"></div>
  <div class="item" style="height: 150px"></div>
  <div class="item" style="height: 170px"></div>
  <div class="item" style="height: 170px"></div>
</div>

/* 让内容按列纵向展示 */
.container {
  display: flex;
  flex-flow: column wrap;
}

/* 重新定义内容块排序优先级，让其横向排序 */
.item:nth-child(3n+1) { order: 1; }
.item:nth-child(3n+2) { order: 2; }
.item:nth-child(3n)   { order: 3; }

/* 强制使内容块分列的隐藏列 */
.container::before,
.container::after {
  content: "";
  flex-basis: 100%;
  width: 0;
  order: 2;
}

最终效果：

原文链接：

纯 CSS 实现横向排序的瀑布流式布局 - The Trivial

标签：flex,container,nth,横向,item,瀑布,3n,order,CSS
来源： https://blog.csdn.net/SilenceJude/article/details/120728635