写 CSS 十几年，布局方案从表格、浮动、Flexbox 一路用到 Grid。现在可以很确定地说：Flexbox 和 Grid 组合，能解决 99% 的布局问题。

Flexbox：一维布局

适合「一行/一列里排列若干元素」的场景：

.nav {
  display: flex;
  justify-content: space-between; /* 两端对齐 */
  align-items: center;            /* 垂直居中 */
  gap: 16px;                      /* 元素间距 */
}

Grid：二维布局

适合「行和列同时控制」的场景，比如这个博客的侧栏 + 内容区：

.layout {
  display: grid;
  grid-template-columns: 1fr 320px; /* 内容自适应 + 侧栏固定 */
}

记住几个关键字就够了

• justify-content：主轴对齐
• align-items：交叉轴对齐
• gap：间距
• minmax(0, 1fr)：防止内容撑破格子
• auto-fit / auto-fill：自动计算列数

超过三分之二的布局问题，用这几个属性就能表达清楚。