CSS 布局笔记

前端布局最常见的问题是元素不居中、内容溢出、移动端错位和滚动区域混乱。掌握 Flex、Grid、定位和盒模型，能解决大部分页面结构问题。

布局选择

flowchart TD
    A[需要布局] --> B{一维还是二维}
    B -- 一维排列 --> C[Flex]
    B -- 行列网格 --> D[Grid]
    C --> E{是否需要固定位置}
    D --> E
    E -- 是 --> F[position]
    E -- 否 --> G[正常文档流]

Flex 常用场景

场景	写法
水平垂直居中	display:flex; align-items:center; justify-content:center;
左右分布	justify-content: space-between;
自动换行	flex-wrap: wrap;
子项占满剩余	flex: 1;

Grid 常用场景

Grid 更适合二维布局，例如卡片墙、仪表盘、图片列表。

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

排查建议

1. 先看父元素宽高是否明确。
2. 再看子元素是否设置了固定宽度导致溢出。
3. 移动端优先使用 minmax、百分比和 max-width。
4. 滚动区域只保留一个主滚动容器，避免嵌套滚动影响体验。