我们可以使用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的缩写。
网格布局属性display: grid
或者display: inline-grid
,两者的区别是后者容器外部盒子保持内联特性,因此可以和图片文字在同一行显示。而前者容器保持块状特性,宽度默认为100%,不和内联元素在一行显示。
grid-template-columns
和grid-template-rows
主要用来指定网格的数量和尺寸等信息。前者在网格中用到的地方比较多,因为网格布局默认布局和块布局很相似,都是从上往下依次垂直排列。
.wrapper {
grid-template-columns: 44px auto 66px;
grid-template-rows: 14% 66px auto 40px;
}
当grid-template-columns
属性值有3个值时,表示网格分为3列。从左往右每列的尺寸分别44px、auto、66px;当grid-template-columns
属性值为4个值时,表示网格分为4类,从上往下每行的高度分别为14%、66px、auto、40px;grid-template-columns
的默认值为none,可以使用grid-auto-columns属性设定网格尺寸。而且grid-template-columns
支持很多数据类型,比如长度值、百分比值、关键字属性值、<flex>
数据类型、函数值(包括repeat()、minmax()、fit-content())。
min-content
指的是一排或者一列格子中所有最小内容尺寸中最大的那个最小内容尺寸值而不是某一个格子的最小内容尺寸。max-content
指的是最终的尺寸是最大内容宽度中最大的那个值。auto
指的是尺寸的上限是最大内容尺寸的最大值,它的尺寸会受到justify-content
和align-content
属性影响的,而max-content的尺寸是固定的。
网格的单位fr
是fraction的缩写,表示分数,用来表示自动分配列的尺寸划分的比例。auto
也可以表示,但是auto的尺寸划分会随着内容变化的,内容多则尺寸大,内容少则尺寸少。而fr是按比例计算与内容多少无关。fr的计算规则是当所有fr值之和大于1,则按fr值的比例划分可自动分配尺寸。当所有fr值之和小于1,则最终的尺寸是可自动分配尺寸和fr值得乘法计算值。
.warpper {
grid-template-columns: 2fr 3fr 4fr;
}
以上案例中的fr之和为9大于1,所以按照比例2:3:4划分。
.warpper {
grid-template-columns: .3fr .3fr .3fr;
}
上面案例中虽然fr值得比例还是1:1:1,但是由于fr的值和0.9小于1,所以网格的宽度是容器尺寸和0.3的乘法计算值,会有10%的尺寸没有网格元素的。