使用 Flexbox 可高效实现左右布局，1. 设置容器 display: flex 实现水平排列，左侧固定宽度，右侧 flex: 1 占据剩余空间；2. 通过 flex 比例实现等分或 1:2 等弹性分配；3. 添加 min-width: 0 与 text-overflow 控制内容溢出；4. 使用 align-items 和 gap 实现垂直对齐与间距管理，灵活适配响应式设计。
使用 Flexbox 实现左右布局是现代 CSS 布局中最常见也最灵活的方式之一。它能轻松控制元素的对齐、排列方向和空间分配，非常适合构建响应式界面。
1. 基础左右布局结构
要实现一个基本的左右布局，先设置容器为 Flex 模式，然后让子元素水平排列。
示例代码：
.container {
display: flex;
}
<p>.left {
width: 200px; /<em> 固定宽度左侧 </em>/
background-color: #f0f0f0;
}</p><p>.right {
flex: 1; /<em> 占据剩余空间 </em>/
background-color: #e0e0e0;
}</p>说明：左侧设固定宽度，右侧使用 flex: 1 自动填充剩余空间，适合侧边栏+主内容区域的布局。
2. 左右等分或按比例分配
如果希望左右两栏按比例分配宽度（如 1:1、2:1），可以都使用 flex 属性。
立即学习“前端免费学习笔记（深入）”；
示例：左右各占 50%
.container {
display: flex;
}
<p>.left,
.right {
flex: 1;
}</p>示例：左栏占 1/3，右栏占 2/3
.left { flex: 1; }
.right { flex: 2; }
这种方式无需设定具体像素值，更具弹性，适配不同屏幕尺寸。
3. 处理内容溢出与自适应
当内容过长时，可能破坏布局。可通过以下方式优化：
- 给右侧内容添加 min-width: 0，防止其撑开容器
- 对长文本使用 text-overflow: ellipsis 避免换行
.right {
flex: 1;
min-width: 0; /* 允许压缩 */
}
<p>.right span {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}</p>4. 垂直对齐与间距控制
Flexbox 也能方便地控制左右区块内部的垂直对齐。
.container {
display: flex;
align-items: center; /* 垂直居中 */
gap: 16px; /* 设置左右间距，推荐使用 gap 而非 margin */
}
使用 gap 可以更清晰地管理子元素之间的间隔，避免嵌套 margin 冲突。
基本上就这些。掌握 display: flex、flex 缩放比例和 min-width 控制，就能高效实现各种左右布局场景，不复杂但容易忽略细节。
