共计 4775 个字符，预计需要花费 12 分钟才能阅读完成。
古代 CSS 布局使开发人员只需按几下键就能够编写非常有意义且弱小的款式规定。下面的探讨和接下来的帖文钻研了 10 种弱小的 CSS 布局，它们实现了一些不凡的工作。
- 超级居中：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
与 Deconstructed Pancake 不同，当屏幕尺寸扭转时，本例不会蕴含它的子元素。通常称为粘性页脚，这种布局通常用于网站和应用程序，跨多个挪动应用程序（页脚通常是工具栏）和网站（单页应用程序通常应用这种全局布局）。向组件增加 display: grid 将为您提供一个单列网格，然而主区域的高度将仅与页脚下方的内容一样高。要使页脚粘在底部，请增加：.parent {display: grid; grid-template-rows: auto 1fr auto;}1fr 页眉和页脚内容设置为主动采纳其子项的大小，并将残余空间 (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); 将为每个 1fr 提供 12 列。.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 将方向设置为 column。这会将题目、形容和图像块放在父卡片内的垂直列中。而后，利用 justify-content: space-between 将第一个（题目）和最初一个（图像块）元素锚定到 flexbox 的边缘，并且它们之间的描述性文本以相等的间距搁置到每个端点。.parent {display: flex; flex-direction: column; justify-content: space-between;}09. 放弃我的格调：clamp(<min>, <actual>, <max>)
这里，咱们介绍一些只有多数浏览器反对的技术，但这些技术对布局和响应式 UI 设计有十分令人兴奋的影响。在本演示中，您将应用固定工具设置宽度，如下所示：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 hack 并为其提供 56.25% 的 padding 以设置顶宽比。咱们很快就会有一个属性来防止黑客攻击和计算百分比的须要。能够应用 1 / 1 的比例制作正方形，应用 2 / 1 制作 2:1 比例。能够设置任何图像缩放比例。.square {aspect-ratio: 1 / 1;} 尽管此性能仍在不断完善中，但它值得理解，因为它解决了许多开发人员面临的抵触，我本人也屡次面临，尤其是在视频和 iframe 方面。论断感谢您急躁实现对这 10 种弱小的 CSS 布局的理解。要理解更多信息，请观看残缺视频，并亲自尝试演示。