一行 CSS 中的十种现代布局

本文重点介绍了几行功能强大的 CSS 代码，它们可以完成一些繁重的工作，并帮助您构建稳健的现代布局。

Una Kravets

借助现代 CSS 布局，开发者只需按几下键盘即可编写真正有意义且强大的样式规则。上述演讲和这篇后续文章将介绍 10 行功能强大的 CSS 代码，它们可以完成一些非常重要的工作。

如需跟着操作或自行试用这些演示，请查看上面嵌入的 Glitch 页面，或访问 1linelayouts.glitch.me。

01. 超居中：place-items: center

对于第一个“单行”布局，我们来解开 CSS 领域最大的谜团：居中显示内容。请放心，使用 place-items: center 比您想象的要简单。

首先将 grid 指定为 display 方法，然后针对同一元素写入 place-items: center。place-items 是同时设置 align-items 和 justify-items 的简写。将其设置为 center 会将 align-items 和 justify-items 都设置为 center。

.parent {
  display: grid;
  place-items: center;
}

这样，无论固有大小，内容都能完全在父项内居中。

02. 拆解后的薄煎饼：flex: <grow> <shrink> <baseWidth>

接下来是分解版煎饼！例如，这是营销网站的常见布局，可能包含一行 3 个内容，通常包括图片、商品名，以及一些文字，用于描述商品的某些特性。在移动设备上，我们希望这些内容能够整齐地堆叠，并随着屏幕尺寸的增大而展开。

通过使用 Flexbox 实现此效果，您无需在屏幕大小调整时使用媒体查询来调整这些元素的位置。

flex 简写表示：flex: <flex-grow> <flex-shrink> <flex-basis>。

因此，如果您希望框填充到 <flex-basis> 大小，在较小的尺寸上缩小，但不伸展以填充任何额外的空间，请编写：flex: 0 1 <flex-basis>。在本例中，您的 <flex-basis> 为 150px，如下所示：

.parent {
  display: flex;
}

.child {
  flex: 0 1 150px;
}

如果您希望框在换行时拉伸并填充空白，请将 <flex-grow> 设置为 1，以便其看起来如下所示：

.parent {
  display: flex;
}

.child {
  flex: 1 1 150px;
}

现在，当您增大或缩小屏幕大小时，这些 Flex 项会缩小和放大。

03. 边栏显示：grid-template-columns: minmax(<min>, <max>) …)

此演示版利用 minmax 函数实现了网格布局。这里我们要做的是将最小边栏大小设置为 150px，但在更大的屏幕上可以拉伸至 25%。边栏将始终占据其父项的 25% 水平空间，直到该 25% 小于 150px 为止。

将其添加为 grid-template-columns 的值，值为：minmax(150px, 25%) 1fr。第一列中的项（在本例中为边栏）在 25% 处获得 150px 的 minmax，第二项（在本例中为 main 部分）则占据剩余的空间，作为单个 1fr 轨道。

.parent {
  display: grid;
  grid-template-columns: minmax(150px, 25%) 1fr;
}

04. Pancake 堆栈：grid-template-rows: auto 1fr auto

与解构的 Pancake 不同，此示例不会在屏幕尺寸发生变化时封装其子项。这种布局通常称为固定底部，通常用于网站和应用，包括移动应用（底部通常是工具栏）和网站（单页应用通常使用这种全局布局）。

向组件添加 display: grid 会为您提供单列网格，但主区域的高度仅与内容的高度相同，页脚位于其下方。

如需让页脚固定到底部，请添加以下代码：

.parent {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

这会将标题和页脚内容设置为自动采用其子项的大小，并将剩余空间 (1fr) 应用于主区域，而大小为 auto 的行将采用其子项的最小内容大小，因此随着内容大小的增加，行本身也会随之增大以进行调整。

05. 经典圣杯布局：grid-template: auto 1fr auto / auto 1fr auto

对于这种经典的“圣杯”布局，包含标题、页脚、左侧边栏、右侧边栏和主内容。它与之前的布局类似，但现在带有边栏！

如需使用一行代码编写整个网格，请使用 grid-template 属性。这样，您就可以同时设置行和列。

属性和值对为：grid-template: auto 1fr auto / auto 1fr auto。第一个和第二个以空格分隔的列表之间的正斜线是行与列之间的分隔符。

.parent {
  display: grid;
  grid-template: auto 1fr auto / auto 1fr auto;
}

在上一个示例中，页眉和页脚的内容会自动调整大小，此时左边栏和右边栏会根据其子项的固有大小自动调整大小。不过，这次是水平尺寸（宽度），而不是垂直尺寸（高度）。

06. 12 跨网格：grid-template-columns: repeat(12, 1fr)

接下来是另一种经典的网格：12 列网格。您可以使用 repeat() 函数在 CSS 中快速编写网格。使用 repeat(12, 1fr); 作为网格模板列，您将获得 12 个各含 1fr 的列。

.parent {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.child-span-12 {
  grid-column: 1 / 13;
}

现在，您已经拥有一个 12 列的轨道网格，我们可以将子元素放置在网格上。一种方法是使用网格线进行放置。例如，grid-column: 1 / 13 将从第一行一直延伸到最后一行（第 13 行），并跨越 12 列。grid-column: 1 / 5; 将跨越前四个。

您还可以使用 span 关键字编写此代码。使用 span，您可以设置起始行，然后设置从该起始点跨越的列数。在本例中，grid-column: 1 / span 12 相当于 grid-column: 1 / 13，grid-column: 2 / span 6 相当于 grid-column: 2 / 8。

.child-span-12 {
  grid-column: 1 / span 12;
}

07. RAM（重复、自动、最小值-最大值）：grid-template-columns(auto-fit, minmax(<base>, 1fr))

在第七个示例中，将您已经学过的一些概念结合起来，创建一个包含自动放置且灵活的子项的自适应布局。这挺好看的。此处需要记住的关键术语是 repeat、auto-(fit|fill) 和 minmax()'，您可以通过首字母缩写 RAM 来记住它们。

所有代码加起来，如下所示：

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

您再次使用了 repeat，但这次使用的是 auto-fit 关键字，而不是显式数字值。这会启用这些子元素的自动放置。这些子元素还具有基本最小值 150px 和最大值 1fr，这意味着在较小的屏幕上，它们将占据整个 1fr 宽度，并且当它们各自达到 150px 宽度时，它们将开始流到同一行。

使用 auto-fit 时，如果文本框的水平尺寸超过 150px，则会拉伸以填充整个剩余空间。不过，如果您将其更改为 auto-fill，则当 minmax 函数中的基准大小超出时，它们不会拉伸：

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

08. 排队：justify-content: space-between

对于下一个布局，要重点介绍的是 justify-content: space-between，它会将第一个和最后一个子元素放置在其边界框的边缘，并将剩余空间均匀分配在这些元素之间。对于这类卡片，它们会置于 Flexbox 显示模式下，并使用 flex-direction: column 将方向设置为列。

这会将标题、说明和图片块放置在父级卡片内的垂直列中。然后，应用 justify-content: space-between 会将第一个（标题）和最后一个（图片块）元素锚定到 Flexbox 的边缘，并且位于这两个元素之间的说明文本会与每个端点保持等距离。

.parent {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

09. 固定我的样式：clamp(<min>, <actual>, <max>)

接下来，我们将介绍一些浏览器支持度较低的技术，但这些技术对布局和响应式界面设计具有非常重要的意义。在此演示中，您将使用 clamp 设置宽度，如下所示：width: clamp(<min>, <actual>, <max>)。

这会设置一个绝对的最小和最大尺寸以及一个实际尺寸。使用值时，代码可能如下所示：

.parent {
  width: clamp(23ch, 60%, 46ch);
}

此处的大小下限为 23ch（即 23 个字符单元），大小上限为 46ch（即 46 个字符）。字符宽度单位基于元素的字体大小（特别是 0 字形的宽度）。“实际”大小为 50%，表示此元素父级宽度的 50%。

clamp() 函数在这里的作用是让此元素保持 50% 的宽度，直到 50% 大于 46ch（在较宽的视口中）或小于 23ch（在较小的视口中）。您可以看到，随着我拉伸和缩小父元素的大小，此卡片的宽度会增加到其上限，并减小到其下限。然后，它保持在父项的中心位置，因为我们已经应用了其他属性来居中它。这样可以实现更易于阅读的布局，因为文本不会过宽（大于 46ch）或过于挤压和狭窄（小于 23ch）。

这也是实现响应式排版的好方法。例如，您可以编写：font-size: clamp(1.5rem, 20vw, 3rem)。在这种情况下，标题的字号将始终保持在 1.5rem 和 3rem 之间的范围内，但会根据 20vw 的实际值进行放大和缩小，以适应视口的宽度。

这是一种非常好的方法，可确保使用最小和最大尺寸值时的易读性，但请注意，并非所有现代浏览器都支持此功能，因此，请确保您有后备方案并进行测试。

10. 宽高比：aspect-ratio: <width> / <height>

最后，最后的这个布局工具是众多工具中最具实验性的工具。该功能最近在 Chromium 84 中引入到了 Chrome Canary 中，Firefox 也在积极努力实现该功能，但目前尚未在任何稳定版浏览器中提供。

不过，我还是想提一下，因为这是经常遇到的问题。这只是保持图片的宽高比即可。

使用 aspect-ratio 属性时，当我调整卡片的大小时，绿色视觉块会保持 16 x 9 的宽高比。我们会使用 aspect-ratio: 16 / 9 来遵循宽高比。

.video {
  aspect-ratio: 16 / 9;
}

要在不添加此属性的情况下保持 16 x 9 的宽高比，您需要使用 padding-top 技巧并为其设置 56.25% 的内边距，以设置上宽比。我们很快就会推出一个用于此目的的属性，以避免使用此 hack 和计算百分比。您可以使用 1 / 1 比例制作正方形，使用 2 / 1 制作 2 比 1 的比例，或者根据需要使用任何比例，以便此图片按设定的尺寸比例缩放。

.square {
  aspect-ratio: 1 / 1;
}

虽然此功能尚未推出，但值得您了解，因为它可以解决我自己多次遇到的许多开发者问题，尤其是在视频和 iframe 方面。

总结

感谢您跟随本课程学习 10 行强大的 CSS 代码。要了解详情，请观看完整视频，并亲自试用演示。