本文重点介绍了几行功能强大的 CSS 代码，它们可以完成一些繁重的工作，帮助您构建强大的现代布局。
发布时间：2020 年 7 月 7 日，上次更新时间：2025 年 12 月 15 日
现代 CSS 布局使开发者只需按几下按键，即可编写出真正有意义且强大的样式规则。上面的演讲和这篇后续博文探讨了 10 行强大的 CSS 代码，它们可以完成一些繁重的工作。
如需自行跟进或体验这些演示，请查看上面的网站嵌入内容，或访问 1linelayouts.com。
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. 煎饼堆：grid-template-rows: auto 1fr auto
与解构煎饼不同，此示例不会在屏幕尺寸发生变化时封装其子项。这种布局通常称为粘性页脚，常用于网站和应用，包括移动应用（页脚通常是工具栏）和网站（单页应用通常使用这种全局布局）。
向组件添加 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（重复、自动、MinMax）：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 时，当盒子的水平尺寸超过 150 像素时，盒子会拉伸以填满整个剩余空间。不过，如果您将其更改为 auto-fill，则当其大小超出 minmax 函数中的基本大小时，它们不会拉伸：
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
08. Line Up：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. Clamping My Style：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>
最后，这最后一个布局解决了保持图片宽高比这一常见问题。
通过 aspect-ratio 属性，当我调整卡片大小时，绿色视觉块会保持 16:9 的宽高比。我们使用 aspect-ratio: 16 / 9 保持宽高比。
.video {
aspect-ratio: 16 / 9;
}
如果不使用此属性，要保持 16 x 9 的宽高比，您需要使用 padding-top 技巧，并为其设置 56.25% 的内边距，以设置顶部与宽度的比例。我们很快就会推出一个属性来避免这种变通方法，也无需计算百分比。您可以制作宽高比为 1 / 1 的正方形、宽高比为 2 / 1 的 2:1 矩形，以及任何您需要的形状，让图片按设定的尺寸比例缩放。
.square {
aspect-ratio: 1 / 1;
}
这项功能非常值得了解，因为它解决了许多开发者面临的难题，我自己也多次遇到过这些问题，尤其是在处理视频和 iframe 时。
总结
感谢您跟随我们一起探索这 10 行强大的 CSS 代码。如需了解详情，请观看完整视频。