【实战】Flex布局-左右自适应

经典的布局场景：左侧固定宽度、右侧自适应

思路

将 Flex 主轴默认为水平方向（row），通过 flex: 1 让右侧区域自动填充剩余空间，左侧区域固定宽度。

原理

1. 父容器设置
   display: flex
width:100%-父容器占满横向空间
   height: 100vh- 确保容器至少占满整个视口高度
2. 左侧设置 width: 200px
3. 右侧设置 flex: 1 - 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%

示例

<div class="container">
  <div class="left">固定宽度 200px</div>
  <div class="right">自适应剩余宽度</div>
</div>

.container {
  display: flex;
  height: 300px;
}

.left {
  width: 200px; /* 固定宽度 */
  background: #f0f0f0;
}

.right {
  flex: 1; /* 自适应剩余空间 */
  background: #e0e0e0;
}

效果图