这是我参与11月更文挑战的第15天，活动详情查看：2021最后一次更文挑战
columns属性
我们可以使用columns属性实现分栏布局，columns属性是column-width和column-count属性的缩写,columns的写法有很多种：
columns: auto;
columns: auto auto;
columns: auto 4rem;
column-width表示每一栏或者每一列最佳宽度，而且不支持百分比。
column-count表示分栏数目，而且当column-width和column-count同时存在时，需要统一转换为column-count值，哪个值小就使用哪个。
column-gap属性表示每一栏之间的空白空隙大小，可以为百分比值，也可以为长度值，column-gap是gap属性的子属性，而gap属性实际上是column-gap属性和row-gap属性的缩写。
column-rule属性是column-rule-width和column-rule-style以及column-rule-color的缩写，column-rule属性和border属性的语法和规则一样。
column-span作用于分栏布局的子元素上，类似于colspan表示内容是否跨多栏显示。默认值为none，表示不横跨多栏，all表示横跨所有垂直列。
column-fill作用是当内容分栏的时候平衡每一栏填充的内容。接收3个值，分别为auto表示按顺序填充每一列，内容只占用它需要的空间。balance是默认值表示列之间平衡内容。balance-all表示尽可能在列之间平衡内容，浏览器暂时不支持。当值为auto时，需要容器有固定的高度才能准确渲染。
break-inside属性可以定义页面打印、分栏布局或者Regions布局发生中断时元素的表现形式，如果没有发生中断，我们就可以忽略这个属性。接收的值也比较多。auto表示元素可以中断，avoid表示元素不能中断。如果我们希望每个列表元素都是独立的，前后都不断开就可以使用avoid实现。
box-decoration-break可以用于分栏断开的文字在每一栏中都拥有独立完整的边框。默认值为slice，表示各个元素断开的部分如同被切开一般。clone表示断开的各个元素的样式独自渲染。
.wrapper {
width: 334px;
columns: 3
}
.wrapper p {
border: 1px solid #ccc;
box-decoration-break: clone;
}
弹性布局中块布局我们可以使用display: block，内联布局可以display: inline,表格布局可以使用display:table或者display: inline-table。定位布局可以使用position: absolute;此外我们可能还会用到float以及display: flex或者display: inline-flex; flex涉及到的属性比较多，比如flex-direction用来控制flex子项整体布局方向，决定从左向右还是从右向左。flex-wrap用来控制flex子项是单行还是换行显示。flex-flow是flex-direction和flex-wrap的缩写。
