怎样用一行 CSS 实现 10 种今世结构

藏宝库编辑 · 2024-9-12 18:55:54

今世 CSS 结构使开辟职员只需按几下键就可以编写非常有意义且强大的样式规则。上面的讨论和接下来的帖文研究了 10 种强大的 CSS 结构，它们实现了一些非凡的工作。
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

与 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 函数中的根本巨细时，它们将不会拉伸：

<figcaption style="margin: 5px 0px 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; text-align: center; color: rgb(136, 136, 136); font-size: 14px;">
</figcaption>
.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 方面。

怎样用一行 CSS 实现 10 种今世结构

所属分类: 问答交流

新帖推荐: 30日

推荐作品