现代CSS布局允许开发人员只需敲击几下键盘就可以编写有意义且强大的样式规则。下面的文章探讨了10个功能强大的CSS布局，它们做了一些出色的工作。01.Supercentered:place-items:center第一个“单行”布局，让我们来解开整个CSS领域最大的谜团：居中。我想让你知道，使用place-items:center比你想象的要容易。先指定grid作为显示方式，然后在同一个元素上写place-items:center。place-items是同时设置align-items和justify-items的快速方法。通过将其设置为center，align-items和justify-items都将设置为居中。.parent{display:grid;place-items:center;}这允许内容在父级中完美居中，无论内部大小如何。02.解构煎饼布局：flex:接下来我们解构煎饼！这是营销网站的常见布局，例如，一行可能有3个项目，通常带有图像、标题，然后是一些描述产品某些功能的文本。在移动设备上，我们希望它们能够很好地堆叠并随着屏幕尺寸的增加而缩放。通过使用Flexbox来实现这种效果，就不需要在屏幕尺寸发生变化时使用媒体查询来调整这些元素的位置了。flex的缩写代表：flex:。因此，如果你想让你的盒子填充到它们的大小，缩小到更小的尺寸，但不拉伸以填充任何额外的空间，写：flex:01.在这种情况下，您的是150px，所以它应该是这样的：空格当一行，请设置为1，所以它应该是这样的：.parent{display:flex;}.child{flex:11150px;}现在，当你增长或这些flex项目收缩和增长当屏幕尺寸缩小时。03.侧边栏布局：grid-template-columns:minmax(,)…)这个demo利用了网格布局的minmax函数。我们在这里所做的是将边栏的最小尺寸设置为150px，但在更大的屏幕上，让它伸展25%。侧边栏将始终占用其父级水平空间的25%，直到25%小于150px为止。添加以下值作为grid-template-columns的值：minmax(150px,25%)1fr。第一列中的项目（在本例中为侧边栏）的minmax为150px（占25%），第二列中的项目（此处为主要部分）占据剩余空间作为单个1fr轨道。.parent{display:grid;grid-template-columns:minmax(150px,25%)1fr;}04.Pancake堆栈布局：grid-template-rows:auto1frauto与DeconstructedPancake不同，当屏幕尺寸发生变化时，这个例子将不会包含它的子元素。通常称为粘性页脚，这种布局通常用于网站和应用程序，跨多个移动应用程序（页脚通常是工具栏）和网站（单页应用程序通常使用这种全局布局）。将display:grid添加到组件将为您提供单列网格，但主要区域的高度只会与页脚下方的内容一样高。要使页脚贴在底部，请添加：.parent{display:grid;grid-template-rows:auto1frauto;}1fr页眉和页脚内容设置为自动占用其子项的大小，剩余空间（1fr)应用于主要区域，而自动调整大小的行将采用其子项的最小内容的大小，以便随着内容大小的增长，行本身也会增长以进行调整。05.经典圣杯布局：grid-template:auto1frauto/auto1frauto对于经典圣杯布局，有页眉、页脚、左侧边栏、右侧边栏和主要内容。类似于以前的布局，但现在有侧边栏！要用一行代码编写整个网格，请使用网格模板属性。这允许您设置行和列。属性和值对是：grid-template:auto1frauto/auto1frauto。第一个和第二个空格分隔列表之间的斜杠是行和列之间的分隔符。.parent{display:grid;grid-template:auto1fraauto/auto1fraauto;}和前面的例子一样，header和footer都有自动调整大小的内容，这里左右侧边栏的大小是根据它们的孩子的固有大小自动调整大小.但是，这次是水平尺寸（宽度）而不是垂直尺寸（高度）。06.12-spangrid:grid-template-columns:repeat(12,1fr)接下来我们还有一个经典布局：12-spangrid。您可以使用repeat()函数在CSS中快速编写网格。使用重复（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列。网格列：1/5；将跨越前四列。另一种方法是使用span关键字。使用span，您可以设置起始行，然后设置从该起始点开始跨越的列数。在这种情况下，grid-column:1/span12相当于grid-column:1/13，而grid-column:2/span6相当于grid-column:2/8。.child-span-12{grid-column:1/span12;}07.RAM(Repeat,Auto,MinMax):grid-template-columns(auto-fit,minmax(,1fr))对于这第七个例子，结合你已经知道的一些概念来创建响应式布局自动放置和灵活的孩子。漂亮整洁。这里要记住的关键点是repeat、auto-(fit|fill)和minmax()'，记住它们的首字母缩写词RAM。总而言之，它应该是这样的：关键字而不是显式值。这样就可以自动放置这些子元素。这些孩子的基本最小值为150px，最大值为1fr，这意味着在较小的屏幕上，它们将占据整个1fr宽度，当它们达到150px宽时，它们将开始流向同一行。使用auto-fit，当水平尺寸超过150px时，框将拉伸以填充整个剩余空间。但是，如果将其更改为自动填充，则在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(,,)在这里，我们介绍一些只有少数浏览器支持的技术，但它们非常令人兴奋对布局和响应式UI设计的影响。在此演示中，您将使用clamp设置宽度，如下所示：width:clamp(,,)。这将设置绝对最小和最大大小以及实际大小。有了这些值，它应该看起来像这样：.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:/最后要介绍的布局工具，也是实验性最强的工具。它最近在Chromium84中被引入到ChromeCanary中，Firefox正在积极致力于它，但还没有任何稳定的浏览器版本。不过，我确实想提一下，因为这是一个经常遇到的问题。这只是保持图像的纵横比。使用纵横比属性，当我调整卡片大小时，绿色可视块保持16x9纵横比。我们用aspect-ratio:16/9来维持这个纵横比。.video{aspect-ratio:16/9;}要在没有此属性的情况下保持16x9的纵横比，请使用padding-tophack并将其填充为56.25%以设置顶部纵横比。我们很快就会有一个属性来避免黑客攻击和计算百分比的需要。1/1的比例可以用来做正方形，2/1的比例可以用来做2:1的比例。可以设置任何图像缩放比例。.square{aspect-ratio:1/1;}虽然此功能仍在开发中，但值得了解，因为它解决了许多开发人员面临的冲突，而我自己也遇到过很多次，尤其是视频和iframe方面.结论感谢您耐心地学习这10个强大的CSS布局。要了解更多信息，请观看完整视频并亲自试用演示。完整视频：https://www.youtube.com/watch?v=qm0IfG1GyZU演示：https://1linelayouts.glitch.me/
