- 还记得弹性盒(flex)布局吗? 弹性布局, 其实网格布局的对齐方式和弹性盒是相同的
- 我们一般说弹性盒布局是一维布局, 而网格布局为二维布局
- 虽然他们遵循统一规范, 但维度不一样, 所以在对齐方式上也会存在一些差异
两条轴线
- 因为网格布局布局为二维布局, 所以他有两个抽线
- 竖直方向的我们称作 块轴(block axis), 水平方向的我们称作 行轴(inline axis)
对齐元素到块轴
- 还记得
align-items 和 align-self 吗? 我们在讲 弹性布局 的时候说到过
- 它们的用法都差不多, 是用于控制元素在块方向的轴上对齐，通过设置这两个属性，可以改变网格区域中的元素的对齐方式。
display: grid;
align-items: start;
gap: 6px;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 100px;
.c2 {
align-self: center;
}
.c3 {
align-self: end;
}
.c4 {
align-self: stretch;
}
对齐元素到行轴
- 类似的通过
justify-items 和 justify-self 用于对齐元素到行轴
display: grid;
justify-items: start;
gap: 6px;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 100px;
.c2 {
justify-self: center;
}
.c3 {
justify-self: end;
}
.c4 {
justify-self: stretch;
}
对齐网格轨道到块轴 align-content
- 网格轨道整体占据的空间小于网格容器，那么就可以在容器中对齐网格轨道, 先看一下默认情况
display: grid;
gap: 6px;
grid-template-columns: repeat(3, 100px);
grid-auto-rows: 100px;
width: 400px;
height: 400px;
border: 1px solid;
.c1 {
grid-column: 1 / span 2;
grid-row: 1 / span 2;
}
.c2 {
grid-row: 1 / span 2;
}
.c4 {
grid-column: 2 / span 2;
}
- 我们调整对齐方式, 使用:
align-content: space-around;(增加这个属性设置)
- 可以看到垂直方向的间隙变大了, 但我们并没有调整
gap, 这个是需要我们注意的点
对齐网格轨道到行轴 justify-content
justify-content 和 align-content 用法一致, 这里就不举例了
简写属性 place-items place-self 和 place-content
place-items 为 align-items 和 justify-items 的简写;place-self 为 align-self 和 justify-self 的简写;place-content 为 align-content 和 justify-content 的简写;
对齐和自动外边距
- 实现水平居中的时候有没有使用过
margin: auto(一般只在水平方向有效)
- 其实在网格中也是同样的效果, 并且在垂直方向也是有效果的, 下面我们在
c1 上新增 margin-top: auto
.c1 {
margin-top: auto;
}
- 内容被推到了区域下侧，因为在为元素的内容分配了空间之后，自动外边距占据了剩余的空间
小结
- 对齐元素到块轴
align-items 和 align-self, 对齐网格轨道到块轴 align-content
- 对齐元素到行轴
justify-items 和 justify-self, 对齐网格轨道到行轴 justify-content
place-items 为 align-items 和 justify-items 的简写;place-self 为 align-self 和 justify-self 的简写;place-content 为 align-content 和 justify-content 的简写;- 对齐和自动外边距,
margin: auto
相关文档
参考文档
