Flex 布局解决 90% 的单维排列问题

横向导航栏、居中卡片、等高按钮组……这些不用算 margin、不靠 float 清除，用 display: flex 一行声明就能稳住：

.container {
  display: flex;
  justify-content: center; /* 主轴居中（默认是水平） */
  align-items: center;     /* 交叉轴居中（默认是垂直） */
  gap: 12px;               /* 项间间距，比 margin 更干净 */
}

注意：justify-content 和 align-items 的方向取决于 flex-direction（默认 row）。如果改成 column，两个属性的作用轴就互换了。

立即学习“前端免费学习笔记（深入）”；

常见翻车点：

• 忘记给父容器设 display: flex，只在子元素上写 align-self —— 没用
• 用 margin: auto 居中子元素，但父容器没设 display: flex —— 只对块级元素的水平居中有效，垂直无效
• 用 float + clear 配合 flex —— 冲突，float 在 flex 容器里被忽略

Grid 布局处理二维区域划分，别硬套 float 或 table

当你要把页面切成“头部+侧边栏+主内容+底部”这种明确网格区域，display: grid 比手动计算百分比宽度+浮动靠谱得多：

PodLM

PodLM是一款强大的AI播客生成工具

下载

.page {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-template-rows: 60px 1fr 40px;
  grid-template-columns: 200px 1fr 300px;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main   { grid-area: main; }
.footer { grid-area: footer; }

优势在于：区域命名即所见，顺序与 DOM 结构解耦，响应式时只需改 grid-template-areas 就能重排版。而 float 布局一旦加个 overflow: hidden 或 zoom: 1 就可能崩。

兼容性提醒：display: grid 在 IE 中完全不可用（哪怕 -ms-grid 也不推荐继续维护），如需支持 IE11，优先用 flex + 伪元素清除浮动，或引入 autoprefixer 并明确指定目标浏览器版本。

别用 做布局，即使它“看起来很整齐”

的语义是“展示表格数据”，不是“分格子”。用它排版会导致：

• 屏幕阅读器误读为数据表，影响无障碍访问
• 移动端强制横向滚动（因为 table 会撑开容器）
• 无法用 gap、justify-content 等现代属性控制间距
• 嵌套多层

后，DOM 层级爆炸，调试困难

真要兼容老系统且必须二维对齐？用 display: table-cell 配合 display: table —— 语义仍是“模拟表格行为”，但结构还是 div，可控性强得多。

最常被忽略的一点：布局类 CSS 应该和语义类分离。比如不要写 class="left-sidebar" 然后在 CSS 里定义 .left-sidebar { float: left; width: 200px; }；而应写 class="sidebar layout-sidebar-left"，把布局规则抽到独立 class 里，方便复用和覆盖。