如何用一行 CSS 实现 10 种现代布局
摘抄
摘抄清单
- 超级居中：
place-items: center - 煎饼式布局：
flex: <grow> <shrink> <baseWidth> - 侧边栏布局：
grid-template-columns: minmax(<min>, <max>) …) - 煎饼堆栈布局：
grid-template-rows: auto 1fr auto - 经典圣杯布局：
grid-template: auto 1fr auto / auto 1fr auto这使您可以同时设置行和列。 - 12 跨网格：
grid-template-columns: repeat(12, 1fr) - RAM (Repeat, Auto, MinMax):
grid-template-columns(auto-fit, minmax(<base>, 1fr)) - 排列布局：
justify-content: space-between - 保持我的风格：
clamp(<min>, <actual>, <max>) - 保持宽高比：
aspect-ratio: <width> / <height>