计算机毕业设计 基于Python的汽车销售管理系统 Python+Django+Vue 前后端分离 附源码 讲解 文档

文章目录

• • 5.6 对齐相关的属性 Alignment properties
  • 5.7 本章小结 Summary

《CSS in Depth》新版封面

5.6 对齐相关的属性 Alignment properties

网格布局模块规范里的对齐属性有一些与 Flexbox 相同，还有一些则是新属性。上一章介绍 Flexbox 布局时已经涵盖了其中大部分内容，这一节就来看看这些属性在网格布局中的用法。想要对网格布局的各个方面做进一步控制，了解这些属性或许会方便很多。

CSS 给网格布局提供了三个以 justify- 开头的对齐属性：justify-content、justify-items 以及 justify-self。它们控制了网格元素在水平方向上的位置。我是这样记的：就像在文字处理器里调整文字位置，让它们在水平方向上排布。

此外还有三个以 align- 开头的对齐属性：align-content、align-items 以及 align-self。它们控制了网格元素在垂直方向上的位置。我是通过类比 行内对齐（inline alignment） 中的 vertical-align 属性来记住它们的。这些属性如图 5.22 所示。

图 5.22 网格内的对齐属性

要设置网格容器内的网格轨道在水平和垂直方向上的位置，可以使用 justify-content 和 align-content 属性实现，尤其是在网格元素的尺寸无法填满网格容器的时候。参考以下样式代码：

.grid {
  display: grid;
  height: 1200px;
  grid-template-rows: repeat(4, 200px);
}

这段代码明确设置了网格容器的高度为 1200px，但水平网格轨道的有效总高度仅为 800px；网格轨道在剩下那 400px 的空间内如何分布，可以通过 align-content 属性进行设置。该属性可以设为下列有效值：

• start —— 将网格轨道放在网格容器的 左上方（top/left）。
• end —— 将网格轨道放在网格容器的 右下方（bottom/right）。
• center —— 将网格轨道放在网格容器的 中间（in the middle）。
• stretch —— 网格轨道 拉伸 至填满网格容器。
• space-between —— 将剩余空间 平均分配 到每个网格轨道之间（将覆盖任何 gap 设置）。
• space-around —— 将空间均布到每个网格轨道间，且在两端各加上 一半 的间距。
• space-evenly —— 将空间均布到每个网格轨道间，且在两端各加上 同等大小 的间距。

想了解更多对齐属性（justify/alignment properties）的示例，请访问 https://gridbyexample.com/。Grid by Example 是一个极好的网站资源，里面汇集的大量网格布局示例，都是由开发者兼 W3C 成员的 Rachel Andrew 大佬精心整理而成。

最后再来聊聊与定位相关的简写属性：place-content、place-items 以及 place-self。这些属性可以同时声明带 align-* 和 justify-* 前缀的属性值，例如：place-content: center start 等效于 align-content: center; justify-content: start。

因为网格布局的内容非常多，所以本章介绍的内容都是网格布局必须掌握的核心概念。建议您对网格布局做更多探索试验。网格有很多种组合方式，无法在一章里逐一介绍，因此您需要自我挑战一下，去尝试一些新事物。在遇到一个有趣的网页布局时，看看能否用网格布局来实现。

5.7 本章小结 Summary

• 网格（Grid）定义了一套基于行与列的页面布局，在元素定位时实现了各元素间的相互关联。
• 网格布局与 Flexbox 布局相辅相成，共同构成了一套完整的布局系统。
• 网格布局中对同一元素定位有三种实现方案，分别对应三类写法：网格线编号、命名网格线、以及命名网格区域。可以根据实际的布局需求任选一种对您而言最直观的解决方案。
• auto-fill/auto-fit 以及隐式网格的定位在布局大量或未知数量的网格元素时效果尤为显著。
• 相比普通网格仅对单一父子结构生效的功能设定，子网格可以在深度嵌套的 DOM 结构下轻松实现元素间更深层次的对齐。
• Flexbox 布局中相同的对齐属性（alignment properties）也同样适用于网格布局。

本专栏为该书第 2 版高分译文专栏，全网首发，精译精校，持续更新，计划今年内完成全书翻译，敬请期待！！！