CSS如何使一侧固定宽度另一侧填满剩余空间_利用flex: 1解决且无需浮动

golang学习网今天将给大家带来《CSS如何使一侧固定宽度另一侧填满剩余空间_利用flex: 1解决且无需浮动》，感兴趣的朋友请继续看下去吧！以下内容将会涉及到等等知识点，如果你是正在学习文章或者已经是大佬级别了，都非常欢迎也希望大家都能给我建议评论哈~希望能帮助到大家！

flex: 1 能撑满剩余空间是因为它是 flex-grow: 1、flex-shrink: 1 和 flex-basis: 0 的简写，其中 flex-basis: 0 使元素初始宽度为0，剩余空间按比例分配。

flex: 1 为什么能撑满剩余空间

flex: 1 是 flex-grow: 1、flex-shrink: 1 和 flex-basis: 0 的简写。关键在 flex-basis: 0 —— 它让元素“假装自己初始宽度为 0”，之后所有剩余空间才按比例分配。如果没设 flex-basis（比如只写 flex: 1 1 auto），它会先按内容宽度占位，再伸缩，结果往往不是你想要的“填满剩余”。

常见错误现象：flex: 1 没生效，右侧还是收缩、换行或溢出；检查父容器是否忘了加 display: flex，或者子元素被 white-space: nowrap 或固定 width 锁死了行为。

• 必须确保父容器有 display: flex 且主轴为水平（默认）
• 固定侧建议显式设置 width 或 flex: 0 0 <值>（如 flex: 0 0 200px）
• 填满侧用 flex: 1 即可，不要额外设 width: 100%，否则可能冲突
• 若填满侧含内边距或边框，记得加 box-sizing: border-box

左侧固定 200px，右侧自动填满的最小可行代码

这是最常搜到的场景，也是最容易因多写一行而失效的配置。核心就三行 CSS，缺一不可：

container {
  display: flex;
}
.sidebar {
  flex: 0 0 200px;
}
.main {
  flex: 1;
}

使用场景：管理后台侧边栏 + 内容区、聊天窗口联系人列表 + 聊天区。注意 flex: 0 0 200px 比 width: 200px 更稳妥——它明确禁止伸缩，且不受 flex-shrink 影响。

• 别用 float 或 inline-block 混搭，flex 容器里它们会被忽略
• 如果右侧内容超长导致横向滚动，给 .main 加 min-width: 0（防止 flex item 默认最小宽度为内容宽度）
• IE10–11 需要加 -ms-flex: 1 前缀，但仅限必要兼容时加

响应式下固定侧变隐藏，填满侧如何不闪跳

用 @media 切换 flex 布局时，常见问题：小屏下固定侧 display: none 后，填满侧突然变宽、内容重排、甚至触发滚动条闪现。根本原因是 flex: 1 在不同父容器宽度下重新计算，而浏览器渲染有延迟。

• 小屏时把固定侧设为 flex: 0 0 0 + overflow: hidden + opacity: 0，比直接 display: none 更平滑
• 填满侧始终设 min-width: 0，避免内容撑开导致布局突变
• 如果用 JS 控制显示/隐藏，优先改 class 而非内联 style，减少重排频率

flex: 1 在表格或表单中为啥不工作

在

• 必须把 flex 容器设在「直接父级」上，而不是表单顶层容器
• 遇到第三方组件，先查文档看是否支持 className 或 style 透传，再包裹一层
• 表单控件（如 <input>）本身不支持 flex，需在外层 div 上设 flex: 1

复杂点在于，flex 行为高度依赖父容器的尺寸来源——如果父容器宽高未定义（比如靠内容撑开），flex: 1 就找不到“剩余空间”可分。这个前提很容易被忽略，尤其嵌套多层时。

好了，本文到此结束，带大家了解了《CSS如何使一侧固定宽度另一侧填满剩余空间_利用flex: 1解决且无需浮动》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！