CSS一行中的十个现代布局

现代CSS布局使开发人员只需几次击键即可编写真正有意义且健壮的样式规则。上面的演讲和随后的这篇文章研究了10行强大的CSS，它们做了一些非常繁重的工作。

要自己学习或使用这些演示，请查看上面嵌入的故障，或访问1linelayouts.glitch.me。

对于第一个单行布局，让我们来解决所有CSS领域中最大的谜团：将东西居中。我想让你知道，有了Place-Items：Center，这比你想象的要容易得多。

首先指定GRID作为显示方法，然后在同一元素上编写place-Items：Center。Place-Items是一种同时设置对齐项目和对齐项目的快捷方式。通过将其设置为居中，对齐项目和对齐项目都设置为居中。

这使得内容可以在父级中完美地居中，而不管固有大小如何。

接下来我们吃的是解构的煎饼！这是营销网站的常见布局，例如，它可能有一排3个项目，通常带有图像、标题，然后是一些文本，描述产品的某些功能。在移动设备上，我们希望它们堆叠得很好，并随着屏幕尺寸的增加而扩展。

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

正因为如此，如果您希望您的箱子填满到其<；flex-base>；大小，缩小到较小的尺寸，但不要拉伸以填满任何额外的空间，请这样写：flex：0 1<；flex-base>；。在本例中，您的<；flex-base>；是150px，因此如下所示：

如果您确实希望框在换到下一行时拉伸并填充空间，请将<；flex-growth>；设置为1，使其看起来如下所示：

现在，随着屏幕尺寸的增加或减小，这些弹性项目既会缩小，也会增大。

此演示利用了网格布局的minmax函数。我们在这里做的是将侧边栏的最小尺寸设置为150px，但在更大的屏幕上，让它延伸到25%。侧边栏将始终占据其父级水平空间的25%，直到这25%变得小于150px。

将其添加为具有下列值的Grid-Template-Columns的值：minmax(150px，25%)1FR。第一列中的项目(本例中的侧栏)以25%的大小获得最小150px，第二个项目(这里的主要部分)作为单个1FR轨道占用剩余空间。

与解构的Pancake不同，此示例在屏幕大小更改时不会对其子项进行换行。通常称为粘性页脚，此布局通常用于网站和应用程序，跨移动应用程序(页脚通常是工具栏)和网站(单页应用程序通常使用此全局布局)。

将Display：Grid添加到组件将为您提供单个列网格，但是主区域的高度只能与其下面带有页脚的内容一样高。

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

对于这个经典的圣杯布局，有页眉、页脚、左边栏、右边栏和主要内容。它类似于以前的布局，但现在有了侧边栏！

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

属性和值对是：Grid-Template：AUTO 1FR AUTO/AUTO 1FR AUTO。第一个和第二个空格分隔列表之间的斜杠是行和列之间的分隔符。

与上一个示例一样，页眉和页脚具有自动调整大小的内容，这里的左侧和右侧侧边栏是根据它们的子级的固有大小自动调整大小的。但是，这次它是水平大小(宽度)而不是垂直大小(高度)。

接下来，我们有另一个经典：12跨网格。您可以使用Repeat()函数在CSS中快速编写网格。使用：Repeat(12，1FR)；对于轴网样板柱，每列提供12列1FR。

现在您有了12列轨道栅格，我们可以将子项放置在栅格上。执行此操作的一种方法是使用网格线放置它们。例如，Grid-Column：1/13将从第一行一直跨越到最后一行(第13行)，并跨越12列。网格-列：1/5；将跨越前四个。

编写此代码的另一种方式是使用SPAN关键字。使用span，您可以设置起始行，然后设置从该起始点跨入多少列。在本例中，网格柱：1/span 12等效于网格柱：1/13，网格柱：2/span 6等效于网格柱：2/8。

在第七个示例中，将您已经学到的一些概念结合起来，以创建具有自动放置和灵活子项的响应式布局。相当整洁。这里需要记住的关键术语是REPEAT、AUTO-(FIT|FILL)和minmax()'；，您可以通过缩写RAM记住它们。

您再次使用了REPEAT，但这一次使用了AUTO-FIT关键字，而不是显式的数字值。这将启用这些子元素的自动放置。这些孩子的基本最小值为150px，最大值为1FR，这意味着在较小的屏幕上，他们将占据完整的1FR宽度，当他们每个人达到150px宽时，他们将开始流到同一条线上。

有了自动调整功能，当它们的水平尺寸超过150px时，盒子就会伸展，以填满整个剩余的空间。但是，如果将其更改为自动填充，则当超过minmax函数中的基本大小时，它们将不会拉伸：

对于下一个布局，这里要演示的要点是JUSTIFY-CONTENT：SPACE-BETWEEN，它将第一个和最后一个子元素放置在其边界框的边缘，其余空间在元素之间均匀分布。对于这些卡，它们被放置在Flexbox显示模式中，使用flex-direction：column将方向设置为Column。

这会将标题、描述和图像块放在父卡内的垂直列中。然后，在FlexBox的边缘上应用JUSTIFY-CONTENT：SPACE-BETWAGE将第一个(标题)和最后一个(图像块)元素锚定，而这两个元素之间的描述性文本将以相等的间距放置到每个端点。

在这里，我们将介绍一些浏览器支持较少的技术，但对布局和响应性UI设计有一些非常令人兴奋的暗示。在本演示中，您将使用CLAMP设置宽度，如下所示：WIDTH：CLAMP(<；min>；，<；Actual>；，<；max>；)。

这将设置绝对最小和最大大小以及实际大小。对于值，这看起来可能如下所示：

这里的最小大小是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的实际值进行增大和缩小，以适合视口的宽度。

这是一种使用最小和最大大小值来确保易读性的伟大技术，但请记住，并不是所有现代浏览器都支持它，因此请确保您有后备并进行测试。

最后，这最后一个布局工具是其中最具实验性的。它是最近在Chrome84中引入Chrome Canary的，Firefox正在积极努力实现它，但目前还没有任何稳定的浏览器版本。

不过，我确实想提一下这一点，因为这是一个经常遇到的问题。这就是简单地保持图像的纵横比。

使用长宽比属性，当我调整卡片大小时，绿色视觉块保持16x9的长宽比。我们尊重宽高比，宽高比为16/9。

要在没有此属性的情况下保持16x9的纵横比，您需要使用顶部填充的方法，并给它56.25%的填充来设置顶部与宽度的比例。我们很快就会有一个属性来避免黑客攻击和计算百分比的需要。你可以用1/1的比例做一个正方形，用2/1的比例做2比1的正方形，用设定的大小比例缩放这个图像所需的任何东西。

虽然这个特性还在发展中，但它是一个值得了解的好特性，因为它解决了我自己多次面临的许多开发人员冲突，特别是在视频和IFRAME方面。

感谢您通过10行强大的CSS跟踪这段旅程。要了解更多信息，请观看完整视频，并亲自试用演示。