1 行代码,10 种现代布局

本贴最后更新于 1566 天前,其中的信息可能已经物是人非

1 行代码,10 种现代布局

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

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

01. Super Centered: place-items: center

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

首先指定 display:grid,然后编写 place-items:centerplace-items 是同时设置 align-itemsjustify-items 的简写。 通过将其设置为居中,等同于同时设置 align-itemsjustify-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-columnsminmax(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 排版

  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    197 引用 • 547 回帖
  • 布局
    6 引用 • 3 回帖
  • 代码
    466 引用 • 631 回帖 • 9 关注
1 操作
Rabbitzzc 在 2020-07-22 22:31:55 更新了该帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • jones2000 3 评论

    请问这种布局, 在浏览器大小发生变动的时候,会自动调整保持原来的排版比例吗?

    会啊,本来就算响应式布局,宽度以及版本都会自适应
    Rabbitzzc
    @Rabbitzzc 是动态的吗? 就是浏览器打开页面,然后拖动浏览器边框放大缩小,当前打开的页面的布局可以动态调整保持和刚打开的时候一样的排版比例,不会出现横线滚动条什么的。
    jones2000
    @jones2000 昂,可以动手尝试一下
    Rabbitzzc
  • 其他回帖
  • Rabbitzzc

    看来从 mdnice 复制过来样式上还是有问题的doge ,感觉好挤

    1 回复
  • 88250 1 1 评论

    文中代码块没有标记语言导致高亮失效。社区内容排版有建议欢迎提出。

    没有没有。是我忽视了,我以为 mdnice 复制过来直接可以,下次注意下次注意
    Rabbitzzc 1