Center of Front

外观

布局基础：Flex 与 Grid ​

是什么 ​

布局 = 决定元素在页面上怎么摆。CSS 只需要掌握两个工具：Flex（一维排列）和 Grid（二维骨架），加上几个经典页面骨架的套路。

Flex vs Grid 怎么选 ​

FlexGrid
维度一维（一行或一列）二维（行 + 列同时定）
内容驱动 or 骨架驱动内容决定尺寸（先有内容再分配空间）先画格子再放内容
典型用途导航栏、按钮组、卡片内的横向排列整页骨架、卡片瀑布流、表单网格
记忆点「这些东西排成一行/列」「这块区域切成几块」

经验法则：页面骨架用 Grid，骨架内部的小排列用 Flex。

三个必会的页面骨架 ​

1. 侧边栏 + 内容（后台标配） ​

css
.layout {
  display: grid;
  grid-template-columns: 240px 1fr; /* 固定侧栏 + 弹性内容 */
  min-height: 100vh;
}

2. 自适应卡片流（卡片数量不定，自动换行） ​

css
.cards {
  display: grid;
  gap: 20px;
  /* 每列最小 240px，能塞几列塞几列 */
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

这一条 CSS = 响应式卡片流，不需要任何媒体查询。

3. 经典三段（头 / 主体 / 尾） ​

css
.page {
  display: grid;
  grid-template-rows: auto 1fr auto; /* 头尾自适应，主体占满 */
  min-height: 100vh;
}

间距系统 ​

间距用一套固定档位（4 的倍数），禁止随手写 7px、13px：

css
:root {
  --space-1: 4px;   /* 图标与文字 */
  --space-2: 8px;   /* 组内元素 */
  --space-3: 16px;  /* 相关区块 */
  --space-4: 24px;  /* 卡片内边距 */
  --space-5: 32px;  /* 分区之间 */
  --space-6: 48px;  /* 大区块之间 */
}

这条和亲密性原则直接挂钩：间距档位拉开差距，分组关系自然清晰。

居中的标准答案 ​

css
/* 任意元素，水平垂直居中 */
.center {
  display: grid;
  place-items: center;
}

响应式断点思路 ​

不要为每个宽度写一套样式。顺序应该是：

  1. 默认写移动端（单列、小字号）
  2. min-width: 768px 加平板调整（出双列）
  3. min-width: 1024px 加桌面调整（出侧栏、三列）
css
.cards { grid-template-columns: 1fr; }
@media (min-width: 768px)  { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(3, 1fr); } }

更多响应式片段见CSS 技巧片段。