前端之多列布局

多列布局 – 父容器属性

设置列数

• column-count 指定列数
  

设置至少列宽

• column-width 设置多列布局中的理想列宽。任何列的宽度都不会小于该值。
  

给多列增加样式

列间隙

column-gap 设置使用元素列之间的间隔.

间隔的宽度和列的宽度与总的页面宽度不能相互满足时,就会出现列减少.

列间的线

column-rule:
是column-rule-width, column-rule-style, column-rule-color简称.
类比border的使用方法.

这条分割线本身并不占用宽度。它置于用 column-gap 创建的间隙内。如果需要更多空间，你需要增加 column-gap 的值。

网页实例1

列与内容折断

如下, 影响整体美观.

break-inside

<style>
.container {
    column-width: 250px;
    column-gap: 20px;
}

.card {
    background-color: rgb(207, 232, 220);
    border: 2px solid rgb(79, 185, 227);
    padding: 10px;
    margin: 0 0 1em 0;
    break-inside: avoid;
    /* page-break-inside: avoid; */
}
</style>

处理方法:
break-after 属性定义之前元素的中断点，
break-before 定义了之后元素的中断点，
break-inside 定义了当前元素的中断点。

网页实例2
下一节: 前端之响应式设计