提到布局，我们通常会想到页面级设计。不过，网页中的较小组件可以有自己的独立布局。
理想情况下，这些组件级布局会根据其在页面上的位置自动调整自身。 在某些情况下，您可能不知道组件是放置在主要内容列中、侧边栏中还是同时放置在两者中。在不确定组件最终会位于何处的情况下，您需要确保组件能够自行调整以适应其容器。
网格
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;
}
了解如何在 Chrome 开发者工具中检查网格布局。
Flexbox
顾名思义，您可以使用 Flexbox 使组件变得灵活。您可以声明组件中的哪些元素应具有最小或最大尺寸，并让其他元素灵活调整以适应相应尺寸。
在此示例中，图片占据了四分之一的可用空间，文字占据了另外四分之三的可用空间。 但图片绝不会超过 200 像素。
.media {
display: flex;
align-items: center;
gap: 1em;
}
.media-illustration {
flex: 1;
max-inline-size: 200px;
}
.media-content {
flex: 3;
}
了解如何在 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 布局。
容器查询是微布局的颠覆性功能。 您的组件可以独立于浏览器视口，自成一体。
检查掌握情况
测试您对微布局的了解程度。
网格和 Flexbox 是否都适用于微布局？
之前，您学习了网页级宏布局。现在，您已了解组件级微布局。
接下来，您将深入了解内容的基本构建块，并学习如何使图片具有自适应性。首先，您将了解自适应排版。