如何用一行 CSS 实现 10 种现代布局？
2021-05-28 本文已影响0人
阿克兰
介绍了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
