css错峰布局/瀑布流样式（类似于快手样式）

当样式一侧比较高的时候会自动换行，尽量保持高度大概一致，

例：

一侧元素为5，另一侧元素为6

当为5的一侧过于高的时候，可能会变为4/7分部dom节点

如果不需要这样的话删除样式  flex-flow:column wrap;

设置父级dom样式

 column-count: 2;  //一行多少个元素
  column-gap: 10px;  //元素之间的间隔
  flex-flow:column wrap;

其中flex-flow:column wrap;意思是：

合了 flex-direction 和 flex-wrap 两个属性。具体来说， flex-flow:column wrap 等价于设置 flex-direction:column 和 flex-wrap:wrap 。

• ‌ flex-direction ‌：这表示主轴的方向为垂直方向，子元素从上到下排列。
• ‌ flex-wrap ‌：这表示如果子元素在一行中排列不下，将会进行换行处理。

通过使用 flex-flow:column wrap ，你可以方便地同时设置主轴方向和换行方式，而不需要分别设置这两个属性。这种简写方式在处理复杂的布局时非常有用，可以减少代码量并提高可读性。

设置子元素样式

break-inside:avoid;

用于指定元素内部是否允许发生页面、栏目或区域的分隔。避免在该元素内部发生分页或分列