Flexbox 自适应布局实战：左右与上下布局技巧

水平布局：左侧固定，右侧自适应

在实际业务场景中，经常遇到侧边栏宽度固定，主内容区自动占满剩余空间的布局需求。这时候利用 Flexbox 是最简洁且兼容性好的方案。核心逻辑其实很直观：给固定宽度的元素设定明确的尺寸上限，而让自适应的元素占据剩余所有空间。

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: row;
}

.left {
  max-width: 180px;
  background-color: #001529;
}

.right {
  flex: 1;
  background-color: #2074c3;
}

这里有个小细节值得留意：左侧使用了 max-width 而不是 width。虽然 width 也能工作，但 max-width 给了内容一定的弹性，防止内部文字过多撑破布局。右侧的 flex: 1 则是关键，它告诉浏览器：'把剩下的地方都给我'，无需手动计算像素值。

垂直布局：顶部固定，底部自适应

同样的逻辑也适用于垂直方向，比如头部导航固定高度，下方内容滚动。只需调整主轴方向，并将尺寸限制改为高度即可。

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.top {
  max-height: 50px;
  background-color: #001529;
}

.bottom {
  flex: 1;
  background-color: #2074c3;
}

同样建议用 max-height 替代 height，避免在极端屏幕比例下出现溢出问题。这种写法代码量少，兼容性好，是处理基础骨架布局时的首选。