# 瀑布流布局 内容以图片为主的时候、信息与信息之间相对独立时、信息与搜索匹配比较模糊时、用户目的性不强的时候 ## multi-column 多栏布局 multi-column几个属性： column-count: 设置共有几列 column-width: 设置每列宽度，列数由总宽度与每列宽度计算得出 column-gap: 设置列与列之间的间距 >column-count和column-width都可以用来定义分栏的数目，而且并没有明确的优先级之分。优先级的计算取决与具体的场景。 计算方式为：计算column-count和column-width转换后具体的列数，哪个小就用哪个 ```css .masonry{ column-count: 3; column-gap: 10px; } .masonry .item{ border:1px solid #999; margin-bottom: 10px; break-inside: avoid; } .masonry .item img{ width: 100%; } // multi-column布局中子元素的排列顺序是先从上往下再从左至右， // 所以这种方式仅适用于数据固定不变的情况，对于滚动加载更多等可动态添加数据的情况就并不适用了 ``` ## grid 布局实现瀑布流 ## Flexbox 实现瀑布流 局限性：必须用固定高度使内容换行，填充比较难以控制；不固定高度的话要结合js才能实现 ```CSS .box { display: flex; flex-flow: column wrap; height: 100vh; } .item { margin: 10px; width: calc(100%/3 - 20px); } .item img{ width: 100%; height:100%; } ```