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 作为返回值。
.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 排版
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于