页面整体布局
整体布局通常根据css中的属性display来进行选择
- flex
display: flex;
- grid
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px; /* 网格项之间的间距 */
padding: 10px;
grid-template-columns
属性可以的表示方法:
- 使用 fr 单位
fr 单位表示可用空间的一个比例份额。
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* 三列,第一列和第三列占1份,第二列占2份 */
}
- 使用固定宽度
可以使用像素、百分比、em、rem 等固定单位定义列的宽度。
.grid-container {
display: grid;
grid-template-columns: 100px 200px 300px; /* 三列,固定宽度 */
}
.grid-container {
display: grid;
grid-template-columns: 50% 50%; /* 两列,各占50%宽度 */
}
- 使用自动宽度
使用 auto 关键字,列的宽度根据其内容自动调整。
.grid-container {
display: grid;
grid-template-columns: auto auto auto; /* 三列,宽度由内容决定 */
}
- 使用 repeat() 函数
repeat() 函数简化了重复列定义的语法。
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 三列,每列占1份宽度 */
}
- 使用 minmax() 函数
minmax() 函数定义列的最小和最大宽度。
.grid-container {
display: grid;
grid-template-columns: minmax(100px, 1fr) minmax(200px, 2fr); /* 两列,第一列最小100px最大1份,第二列最小200px最大2份 */
}
- 混合使用
可以混合使用不同的单位和函数来创建复杂的布局。
.grid-container {
display: grid;
grid-template-columns: 200px auto 1fr 2fr; /* 四列,第一列200px,第二列自动,第三列和第四列占比例宽度 */
}
- 使用 fit-content()
fit-content() 允许列根据内容自动调整宽度,但不会超过指定的最大值。
.grid-container {
display: grid;
grid-template-columns: fit-content(100px) fit-content(200px); /* 两列,宽度根据内容调整,但不会超过100px和200px */
}
- 使用 max-content 和 min-content
max-content 根据内容的最大宽度设置列宽,min-content 根据内容的最小宽度设置列宽。
.grid-container {
display: grid;
grid-template-columns: max-content min-content; /* 两列,第一列最大内容宽度,第二列最小内容宽度 */
}