微型布局

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

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

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

网格

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 可让您从内容开始设计。您可以指定元素的参数（应变窄、应变宽），然后让浏览器确定最终实现。

但组件本身并不知道其上下文。 而不知道该标签页是用在主要内容中，还是放在边栏中。 这可能会使组件布局比页面布局更复杂。 为了能够应用与上下文相关的样式，您的组件需要了解更多内容，而不仅仅是其所在视口的大小。

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

如需报告任何容器的维度，请使用容器查询。

首先，定义哪些元素将作为容器。

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 是否都适用于微布局？

True
🎉
False
🎉? Grid 和 Flexbox 都非常实用，哪怕是最“最小”的布局。

之前，您已经了解了网页级宏布局。 现在，您已经了解了组件级微布局。 接下来，您将更深入地了解内容的基本构成。 您将了解如何制作自适应图片。现在，我们来探索自适应排版。