1 行代码，10 种现代布局

1 行代码，10 种现代布局

~!!! 一般 B 端系统可以使用，C 端系统有时候需要考虑到兼容性

作为前端开发，在开发需求的时候，选择一个布局并实现一个布局，有时候还是蛮头疼的，有时候写好布局以后，上线被产品发现布局或者样式有问题。所以这篇文章总结了几行功能强大的 CSS，这些代码可以完成一些繁琐头疼的工作，构建可靠的现代布局。

• code：https://codesandbox.io/s/one-line-css-ten-modern-layouts-3k5r7?file=/index.html
• demo：https://3k5r7.csb.app/

01. Super Centered: place-items: center

place-items: center 是一个非常强大的居中布局属性，一行代码能够同时设置水平垂直居中。

首先指定 display:grid，然后编写 place-items：center。place-items 是同时设置 align-items 和 justify-items 的简写。 通过将其设置为居中，等同于同时设置 align-items 和 justify-items 为居中。

.parent {
  display: grid;
  place-items: center;
}

02. Flex: grow shrink baseWidth

例如，营销站点的常见布局，可能有 3 行，通常带有图像，标题和一些文本，描述了产品的某些功能。 在移动设备上，我们希望它们能很好地堆叠在一起，并随着屏幕尺寸的增加而扩展。

而通过使用 Flexbox 布局来实现此效果，不需要媒体查询 @media 等即可在调整网页屏幕大小时调整这些元素的位置。展示效果会非常的自然。

flex 属性包括：flex: <flex-grow> <flex-shrink> <flex-basis>，分别是规定项目将相对于其他灵活的项目进行扩展的量，规定项目将相对于其他灵活的项目进行收缩的量，以及项目的长度。

! 如果需要详细了解 flex 的三个属性，可以参考：https://www.zhangxinxu.com/wordpress/2019/12/css-flex-deep/

flex: 0 1 width

.parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

}

.child {
  flex: 0 1 150px;
}

flex: 1 1 width

.parent {
  display: flex;
}

.child {
  flex: 1 1 150px;
}

上面两种不同的设置，实际的布局效果也是不同的，具体可以根据产品需求来设置。

03. Sidebar: grid-template-columns: minmax(<min>, <max>)

在 demo 中，是利用了 minmax 函数的网格布局。 在这里所做的是将最小边栏大小设置为 150px，但在较大的屏幕上，将其扩展到 25％。 边栏将始终占据其父级水平空间的 25％，直到 25％小于 150px。

首先给父类设置 grid-template-columns 为 minmax(150px, 25%) 1fr。侧边栏设置最小值为 150px 到 25%，右边内容区域对剩余空间进行等分。

CSS Grid 带来新的单位：fr，代表对剩余空间进行等分

.parent {
  display: grid;
  /** 横向设置*/
  grid-auto-flow: column; 
  grid-template-columns: minmax(150px, 25%) 1fr;
}

04. Hamburger grid-template-rows: auto 1fr auto

在上面通过 grid-template-columns 设置了横向的侧边栏布局，实际上，通过 grid-template-rows 属性，也是可以固定一个 div，另个一个 div 自适应的，只需要将上面属性改为 *-rows 即可。

grid-template-row 还有一个作用，可以利用其 auto 1fr auto 属性值，来实现汉堡 🍔 夹层布局。

.parent {
  display: grid;
  /* 上下auto，中间布局大*/
  grid-template-rows: auto 1fr auto; 
}

05. (Classic Holy Grail Layout)圣杯布局： grid-template: auto 1fr auto / auto 1fr auto

圣杯布局，有页眉、页脚、左边栏、右边栏（侧边栏）和中间的核心内容。

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

.parent {
   display: grid;
   grid-template: auto 1fr auto / 150px 1fr 150px;
}

06. (12-Span Grid)12 网格布局：grid-template-columns: repeat(12, 1fr)

12 网格布局，可以使用 repeat 函数在 CSS 中快速编写网格。使用 repeat(12,1fr) ，网格模板列会提供 12 列，每列为 1fr 的距离。

.parent {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

07. RAM (Repeat, Auto, MinMax)子元素自适应宽度: grid-template-columns(auto-fit, minmax(<base>, 1fr))

创建具有自动放置和灵活的子节点的响应式布局。很整洁。这里需要记住的关键术语是 repeat、auto-(fit|fill)和minmax()，它的缩写是 RAM。

.parent {
  display: grid;
  grid-gap: 1rem;
  /* 重复次数自适应，根据子类元素数量确定， 每个子元素最小宽度最150 */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

08. Line Up(对齐)：justify-content: space-between

justify-content 属性定义了浏览器之间，如何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间。

justify-content: space-between 均匀排列每个元素首个元素放置于起点，末尾元素放置于终点。

例子中的 card 元素中的子元素的排列即为展示效果。

.card {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  justify-content: space-between;
}

09. Clamp 函数：居中布局的有一个方案

clamp() 函数作用是返回一个区间范围的。width:clamp 将设置绝对最小和最大大小以及实际大小。

clamp(MIN, VAL, MAX)

其中 MIN 表示最小值，VAL 表示首选值，MAX 表示最大值。意思是，如果 VAL 在 MIN 和 MAX 范围之间，则使用 VAL 作为函数返回值；如果 VAL 大于 MAX，则使用 MAX 作为返回值；如果 VAL 小于 MIN，则使用 MIN 作为返回值。

注意兼容性：https://caniuse.com/#search=clamp。兼容是比较差的

.parent {
  width: clamp(23ch, 50%, 46ch);
}

10. Respect for Aspect: aspect-ratio: <width> / <height>

终于到最后一个了。

aspect-ratio CSS 媒体属性 可以用来测试 viewport 的宽高比。因此可以利用检测容器的宽高比实现自适应的布局。

.video {
  aspect-ratio: 16 / 9;
}

aspect-ratio 的兼容性更差，只支持 chrome84+。https://caniuse.com/#search=aspect-ratio

总结

上面列举了 10 行强大的 CSS，来实现现代常用的布局。希望对大家有帮助！

本文使用 mdnice 排版