在布局方面,我们通常会考虑到页面级设计。但是,页面中的较小组件也可以有自己的独立布局。
理想情况下,无论这些组件级布局在页面上的位置如何,都会自动调整。 在某些情况下,您可能不知道某个组件应放置在主内容列和/或边栏中。 不知道组件会在哪里结束,您需要确保组件可以根据自己的容器自行调整。
网格
CSS 网格不仅仅适用于页面级布局。 它也非常适合它们内部的组件。
在此示例中,::before
和 ::after
伪元素会在标题的任意一侧创建装饰线。标题本身是一个网格容器。各个元素的布局方式始终让线条始终填满可用空间。
h1 {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 1em;
}
h1::before,
h1::after {
content: "";
border-top: 0.1em double black;
align-self: center;
}
![Firefox 中的开发者工具,显示网格叠加层。](https://web.developers.google.cn/static/learn/design/micro-layouts/image/developer-tools-firefox-41cc2b52eb644.png?authuser=5&hl=nb)
![Chrome 中的开发者工具,显示了网格叠加层。](https://web.developers.google.cn/static/learn/design/micro-layouts/image/developer-tools-chrome-s-295e54e7843c5.png?authuser=5&hl=nb)
了解如何在 Chrome 开发者工具中检查网格布局。
Flexbox
顾名思义,您可以使用 flexbox 让组件变得灵活。您可以声明组件中哪些元素应具有最小或最大尺寸,并让其他元素相应地灵活适应。
在本例中,图片占用了四分之一的可用空间,而文本占据了另外四分之三。但图片绝不会超过 200 像素。
.media {
display: flex;
align-items: center;
gap: 1em;
}
.media-illustration {
flex: 1;
max-inline-size: 200px;
}
.media-content {
flex: 3;
}
![Firefox 中的开发者工具,显示 Flexbox 叠加层。](https://web.developers.google.cn/static/learn/design/micro-layouts/image/developer-tools-firefox-4f0d749fd4328.png?authuser=5&hl=nb)
![Chrome 中的开发者工具,显示 Flexbox 叠加层。](https://web.developers.google.cn/static/learn/design/micro-layouts/image/developer-tools-chrome-s-49b481f837205.png?authuser=5&hl=nb)
了解如何在 Chrome 开发者工具中检查 Flexbox 布局。
容器查询
Flexbox 可让您从内容开始设计。您可以为元素的参数(应变窄、应变宽)指定元素,然后让浏览器确定最终实现。
但是,组件本身并不知道其上下文。而不知道该标签页是用在主要内容中还是边栏中。 这可能会使组件布局比页面布局更复杂。 为了能够应用与上下文相关的样式,您的组件需要了解更多内容,而不仅仅是其所在视口的大小。
使用页面布局时,您确实可以知道容器的宽度,因为容器是浏览器视口;媒体查询会报告网页级容器的尺寸。
如需报告任何容器的维度,请使用容器查询。
首先,定义哪些元素充当容器。
main,
aside {
container-type: inline-size;
}
这意味着您需要查询内嵌维度。对于英语文档,该数字为横轴。您将根据容器的宽度更改样式。
如果某个组件位于上述某个容器内,您可以应用样式,方法与应用媒体查询类似。
.media-illustration {
max-width: 200px;
margin: auto;
}
@container (min-width: 25em) {
.media {
display: flex;
align-items: center;
gap: 1em;
}
.media-illustration {
flex: 1;
}
.media-content {
flex: 3;
}
}
如果媒体对象位于小于 25em
的容器内,则不会应用 Flexbox 样式。图片和文字按垂直顺序显示。
但是,如果所包含元素的宽度大于 25em
,那么图片和文字会并排显示。
借助容器查询,您可以单独设置组件的样式。您可以根据所包含元素的宽度编写规则;视口的宽度不再重要。
合并查询
您可以对页面布局使用媒体查询,对页面内的组件使用容器查询。
在此示例中,页面的整体结构包含一个 main
元素和一个 aside
元素。这两个元素中都有媒体对象。
<body>
<main>
<div class="media">…</div>
<div class="media">…</div>
</main>
<aside>
<div class="media">…</div>
</aside>
</body>
当视口宽度超过 45em
时,媒体查询会将网格布局应用于 main
和 aside
元素。
@media (min-width: 45em) {
body {
display: grid;
grid-template-columns: 3fr 1fr;
}
}
媒体对象的容器查询规则保持不变:仅当所含元素宽度大于 25em
时,才应用水平 Flexbox 布局。
容器查询是微布局的颠覆性因素。您的组件可以保持独立,与浏览器视口无关。
检查您的掌握程度
测试您对微布局知识的掌握情况。
Grid 和 flexbox 是否都适用于微布局?
之前,您已经了解了网页级宏布局。现在,您已经了解了组件级微布局。
接下来,您将更深入地了解内容的基本组成要素,并了解如何使图片具备自适应能力。首先,您将了解自适应排版。