微型布局

在提到布局时，我们通常会考虑网页级设计。 但是，页面中的较小组件也可以有自己的独立布局。

理想情况下，无论这些组件级布局在页面上的位置如何，它们都会自动调整。 有时，您可能不知道某个组件应放置在主内容列和/或边栏中。 不知道组件最终会在哪里展示，您需要确保组件能够根据其容器自行调整。

一种采用宽字体和窄字体的两列布局。根据媒体对象的布局是宽列还是窄列，媒体对象的布局方式有所不同。

网格

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 中的开发者工具显示网格叠加层。 Chrome 中的开发者工具，显示了网格叠加层。
Firefox 和 Chrome 等桌面浏览器提供开发者工具，可以显示叠加在设计上的网格线和区域。

了解如何在 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 叠加层。 Chrome 中的开发者工具，显示 Flexbox 叠加层。
Firefox 和 Chrome 中的开发者工具可以帮助您直观呈现 Flexbox 组件的形状。

了解如何在 Chrome 开发者工具中检查 Flexbox 布局。

容器查询

Flexbox 可让您从内容开始进行设计。 您可以指定元素的参数（它们应多窄、多宽），然后让浏览器确定最终的实现方法。

但组件本身无法感知其上下文。并不知道当前图片是否正用在主要内容中或边栏中。 这可能会使组件布局比页面布局更复杂。 为了能够应用与上下文相关的样式，您的组件需要知道其所在视口的大小以外的更多信息。

使用页面布局时，您确实可以知道容器的宽度，因为容器是浏览器视口；媒体查询会报告网页级容器的尺寸。

现在，有一种即将推出的 CSS 技术可以报告任何父级容器的维度：容器查询。

首先，请定义哪些元素将充当容器。

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 都对微型布局有用吗？

正确
🎉
False
🎉? 网格和 Flexbox 都非常实用，哪怕是“最小”的布局。

在前面，您已经了解了页面级宏布局。 现在，您已经了解了组件级微布局。 接下来，您将深入了解自己内容的基本组成要素。 您将学习如何制作自适应图片。不过，现在我们来探索自适应排版。