这篇文章重点介绍了几个强大的 CSS 代码行，它们可以完成一些繁重的工作，并帮助您构建强大的现代布局。
现代 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。第一列中的项目（在本例中为侧边栏）获得 minmax，范围为 150px 到 25%，第二个项目（此处的 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（Repeat、Auto、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，当框的水平尺寸超过 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>)
这里我们介绍一些 浏览器支持较少的技术，但对于布局和响应式 UI 设计具有一些非常令人兴奋的含义。在此演示中，您正在使用 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)。在这种情况下，标题的 font-size 将始终保持在 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 hack 并为其提供 56.25% 的内边距以设置顶部与宽度的比率。我们很快将拥有一个属性来解决这个问题，避免 hack 和计算百分比的需要。您可以使用 1 / 1 比率制作正方形，使用 2 / 1 制作 2 比 1 比率，以及真正需要的任何东西，以便此图像以设定的尺寸比率缩放。
.square {
aspect-ratio: 1 / 1;
}
虽然此功能仍在不断发展，但这是一个值得了解的好功能，因为它解决了我在很多次都面临的许多开发人员难题，尤其是在视频和 iframe 方面。