Masonry - 瀑布流布局
imjeen opened this issue · comments
imjeen commented
使用CSS的多列布局
- 属性 column-count 设置特定数量的列数
- 属性 column-width 设置期望的最小列宽。(如果 column-count 没有设置,那么浏览器就会以合适的宽度尽量显示更多的列。)
使用简写属性 columns 书写
- 声明 column-count: 8 和 column-width:12em 等效于 columns:12 8em
- 声明 column-count:4 等效于 columns:4
-声明 column-width:12em 等效于 columns:12em
兼容性: https://www.caniuse.com/#search=columns
<main class="masonry">
<section class="item>1</section>
<section class="item>2</section>
<section class="item>3</section>
<section class="item>4</section>
<!-- more items -->
</main>
.masonry{
column-count: 3; /* 列数 */
}
.item{
break-inside: avoid; /* 元素不能中断 */
}
参考
- css-tricks: Approaches for a CSS Masonry Layout
- 掘金:深度解析瀑布流布局
- csswg-draft: #945、#4650
- Isotope