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

介绍了display: grid 超级居中、可解构的自适应布局(The Deconstructed Pancake)、fr 关键字为了方便表示比例关系,网格布局提供了fr关键字(fraction 的缩写,意为"片段")。如果两列的宽度分别为1fr和2fr,就表示后者是前者的两倍、03. 经典的 sidebar、04. 固定的 header 和 footer、05. 经典的圣杯布局(classical holy Grail layout)、06. 有意思的叠块、07. RAM 技巧、08. 卡片弹性自适应、09. 使用 clamp 实现 fluid typography、10. 完美实现比例、

https://mp.weixin.qq.com/s/Rn7bLFj6Ix8Q8NsYTlAXMg

1.gif

2.gif
3.gif
4.gif
5.gif
6.gif
8.gif
9.gif
10.gif
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容