css 分栏布局 columns

2024-02-26 10:06:22

分栏布局 – 简介

将子元素拆分为列，使用场景并不多，重点掌握 columns 和 column-gap，其他用得少，简单了解下即可。

优点：
不会改变元素原本的display计算值

<ul style = "columns: 2;"> 
    <li>重庆市</li>
    <li>哈尔滨市</li>
    <li>长春市</li>
    <li>兰州市</li>
    <li>北京市</li>
    <li>杭州市</li>
    <li>长沙市</li>
    <li>沈阳市</li>
    <li>成都市</li>
    <li>合肥市</li>
    <li>天津市</li>
    <li>西安市</li>
</ul>

以下为相关属性详解：

columns 列宽和列数

columns是column-width和 column-count的缩写

/* 栏目宽度 */
columns: 18em;

/* 栏目数目 */
columns: auto;
columns: 2;

/* 同时定义宽度和数目，顺序任意 */
columns: 2 auto;
columns: auto 2;

column-width和 column-count都是期望值，最终的分栏表现规则为：统一转换column-count值，哪个值小就使用哪一个。

/* 最终2栏显示 */
.container-1 {
    width: 360px;
    column-count: 2;
    column-width: 100px;
}
/* 最终3栏显示 */
.container-2 {
    width: 360px;
    column-count: 4;
    column-width: 100px;
}

column-width 不支持百分比值

column-gap 分栏间隙

/* 关键字属性值 */
column-gap: normal; 

/* 长度值 */
column-gap: 3px;
column-gap: 3em;

/* 百分比值 */
column-gap: 3%;

gap属性实际上是column-gap属性和row-gap属性的缩写，所以也可以用gap来简化代码（IE暂不支持）

.container {
    columns: 2;
    gap: 1rem;
}

column-rule 分栏分割线

column-rule属性是column-rule-width、column-rule-style和column-rule-color这3个CSS属性的缩写，和border类似。

column-rule: dashed deepskyblue;

效果见 https://demo.cssworld.cn/new/6/1-3.php

column-span 跨栏

none表示不横跨多栏，默认值。
all表示横跨所有垂直列。

效果见 https://demo.cssworld.cn/new/6/1-4.php

常用于在分栏布局中插入广告

column-fill 分栏填充方式

auto的作用是按顺序填充每一列，内容只占用它需要的空间，需配合容器元素的height属性一起使用。
balance是默认值，作用是尽可能在列之间平衡内容。在分隔断开的上下文中，只有最后一个片段是平衡的。例如，有多个<p>元素，正好最后一个<p>换行了，那这个<p>元素的内容前后等分，保持平衡。这会造成最后一栏内容较少的问题。
balance-all的作用是尽可能在列之间平衡内容。在分隔断开的上下文中，所有片段都是平衡的。该属性值目前没有任何浏览器支持，可以忽略。

效果见 https://demo.cssworld.cn/new/6/1-5.php

break-inside 控制内容中断

auto表示元素可以中断。
avoid表示元素不能中断。

还可以在页面打印时控制某个元素不跨页。

效果见 https://demo.cssworld.cn/new/6/1-7.php

box-decoration-break 控制装饰中断

兼容性不佳，了解即可。

slice为默认值，表示各个元素断开的部分如同被切开一般。
clone表示断开的各个元素的样式独自渲染。

【用Firefox浏览器查看】效果见 https://demo.cssworld.cn/new/6/1-8.php

经典应用——两端对齐

只适用于单行的两端对齐

 column-count: 3;
 column-gap: 5%;

效果见 https://demo.cssworld.cn/new/6/1-6.php

经典应用——电子书水平翻页阅读效果

详见 https://www.zhangxinxu.com/wordpress/2017/02/css3-multiple-column-layout-read-horizontal/

码农公寓