如何用一行CSS实现10种现代布局

如何用一行CSS实现10种现代布局

本文重点介绍一些强大的css代码行，他们能执行一些繁重的工作并帮助我们构建强大的现代布局。

Demo示例

现代CSS布局使开发人员只需要几行代码就可以编写十分有意义且强大的样式规则。接下来的文章研究了10种强大的CSS布局，它们实现了一些非凡的工作。

01.超级居中：place-items: center

对于第一个“单行”布局，我们来解决所有CSS领域中最大的谜团：居中。我想让大家知道, 使用place-items: center 会让此操作比你想象的更容易。

我们先回顾下现在最常用的居中方式：

    display: flex;
    justify-content: center;
    align-items: center;
复制代码

现在有一种更为简单的方式：首先指定grid作为display方法，然后在同一个元素上写入place-items: center。place-items是同时设置align-items和justify-content的快速方法。通过将其设置为center，align-items和justify-content都将设置为center。

    display: grid;
    place-items: center;
复制代码

这使得内容能够在父级内完美居中，而不管内部大小。

02.解构煎饼式布局：flex:

解构煎饼式布局是营销网站常用的布局。例如：可能一行有三个项目，项目通常带有图片、标题，还有一些描述产品功能的文本。在移动设备上，我们希望它们能很好的堆叠，并随着我们增加屏幕的尺寸进行扩展。

这个效果我们可以使用flexbox实现，不需要再屏幕尺寸发生变化的时候通过媒体查询来调整这些元素的位置。

flex属性是用于设置或检索弹性盒模型对象的子元素如何分配空间。
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
flex-grow属性用于设置或检索弹性盒子的扩展比率。
flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

如果我们想要让元素的大小填充到他们的大小，缩小到更小的尺寸，但不拉伸以填充任何额外的空间，就可以写入：flex: 0 1 。 假设我们把设置为150px，样式就应该是：

    .parent{
        display: flex;
    }
    .child{
        flex: 0 1 150px;
    }
复制代码

如果我们希望元素换到下一行时拉伸并填充空间，就要讲设置为1，样式应该为：

    .parent{
        display: flex;
    }
    .child{
        flex: 1 1 150px;
    }
复制代码

这样我们在增加和减少屏幕尺寸时，这些flex项目会相对进行缩小和增长。

03.侧边栏布局：grid-template-columns: minmax() …

侧边栏布局就是 网格布局利用了minmax函数。这个效果是将最小侧边栏大小设置为150px，但是在大屏幕的时候，让他伸展出25%。侧边栏将始终占据其父级水平空间的25%，直到20%变得小于150px。

实现代码是设置以下属性：grid-template-columns： minmax(150px, 25%) 1fr。第一个属性值minmax是指将侧边栏的最小宽度设置为150px最大宽度为25%；第二个属性值1fr是占据剩余空间作为单一的1fr轨道。

    .parnet{
        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)；将为每个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(, 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(, , )

第九个案列是一些只有少数浏览器支持的技术，但这些技术对布局和响应式 UI 设计有非常令人兴奋的影响。在本演示中，您将使用固定工具设置宽度，如下所示：width: clamp(, , ) 。

这将设置绝对最小和最大尺寸以及实际尺寸。有了值，应该这样：

.parent {
  width: clamp(200px, 50%, 600px);
}
复制代码

这里的最小尺寸是 200px，最大尺寸是 600px。“实际”尺寸为 50%，代表此元素父宽度的 50%。

在这里， clamp() 函数所做的是使该元素保持 50% 的宽度，直到 50% 大于 600px （在较宽的视口上）或小于 200px （在较小的视口上）。您可以看到，当拉伸和收缩父尺寸时，这张卡片的宽度会增加到其最大限制点并减小到其限制最小点。然后它保持在父级的中心，因为我们已经应用了其他的属性来将它居中。这可以实现更清晰的布局，因为文本不会太宽（超过 600px ）或太窄（小于 200px ）。

这也是实现响应式排版的好方法。例如，您可以编写：font-size: clamp(1.5rem, 20vw, 3rem) 。在这种情况下，标题的字体大小将始终保持在 1.5rem 和 3rem 之间，但会根据 20vw 实际值增大和缩小以适应视口的宽度。

这是一种很好的技术，可以通过最小和最大尺寸值确保易读性，但请记住，并非所有现代浏览器都支持它，因此请确保您有回退措施并进行测试。

10.保持宽高比：aspect-ratio: /

最后要介绍的这一布局工具是最具实验性的工具。它最近在 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 以设置顶宽比。使用aspect-ratio很快就会有一个属性来避免黑客攻击和计算百分比的需要。可以使用 1 / 1 的比例制作正方形，使用 2 / 1 制作 2:1 比例。可以设置任何图像缩放比例。

.square {
  aspect-ratio: 1 / 1;
}
复制代码

虽然此功能仍在不断完善中，但它值得了解，因为它解决了许多开发人员面临的冲突，尤其是在视频、图片和 iframe 方面。

参考文章

文章来源
完整视频
演示

来源：https://juejin.cn/post/7148326915298820133