使用 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; } 

这种方式无需设定具体像素值，更具弹性，适配不同屏幕尺寸。

左手医生开放平台

左医科技医疗智能开放平台

26

查看详情

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 控制，就能高效实现各种左右布局场景，不复杂但容易忽略细节。

以上就是在