在页面布局里，纯弹性布局和纯固定布局都好写，麻烦的往往是两者混在一起的时候：比如左侧边栏必须锁定240像素，右侧内容区撑满剩余空间；或者导航栏里logo固定宽度，菜单项平分剩下的区域。Flex布局处理这类需求其实非常顺手，前提是你得真正理解flex属性背后的宽度分配机制，而不是死记flex:1这一种写法。本文从原理讲到实战，把固定宽度与弹性宽度混合使用的各种细节一次讲透。
先搞懂flex属性的三个组成部分
很多人写flex:1写了好几年，却说不清它到底代表什么。实际上flex是flex-grow、flex-shrink、flex-basis三个属性的缩写。flex-grow决定当容器有多余空间时，子元素按什么比例去瓜分这些空间；flex-shrink决定空间不足时子元素按什么比例收缩；flex-basis则是分配空间前子元素的基准尺寸，优先级高于width。
理解这三个属性后，固定宽度与弹性宽度的组合思路就清晰了：固定宽度的子元素要设置flex:none，它等价于flex:0 0 auto，意思是既不放大也不收缩，基准尺寸取自身宽度，这样无论容器怎么变，它的宽度都纹丝不动。而需要自适应的子元素设置flex:1，等价于flex:1 1 0%，基准尺寸为0，完全靠放大因子来瓜分剩余空间。
有一个容易被忽略的细节：flex-basis默认值是auto，也就是取width属性的值。所以如果你只写了flex-grow:1而没改基准尺寸，子元素会先按自身宽度占位，再把剩余空间分配出去，多个子元素的初始宽度不同就会导致最终宽度不均。这也是为什么推荐用flex:1而不是单独写flex-grow:1的原因。
经典场景一：左侧固定右侧自适应
侧边栏加内容区是后台管理系统最常见的布局。侧边栏锁定240像素，内容区自动填满剩余空间，代码只需要几行：
<style>
.container {
display: flex;
height: 100vh;
}
.sidebar {
flex: none; /* 不放大、不收缩，宽度锁定 */
width: 240px;
background: #2d3a4b;
}
.main {
flex: 1; /* 占据全部剩余空间 */
background: #f5f7fa;
overflow: auto; /* 内容超出时独立滚动 */
}
</style>
<div class="container">
<aside class="sidebar">侧边栏</aside>
<main class="main">内容区域</main>
</div>这里有个实战经验值得注意：给.main加上overflow:auto很有必要。如果不加，当内容区里的内容很宽时（比如一张大表格），它会把整个flex容器的宽度撑开，导致水平方向出现滚动条，侧边栏右侧出现空白。加上溢出处理后，滚动被限制在内容区内部，侧边栏位置不会受到牵连。
另外提醒一点，如果固定宽度的子元素是一张图片或者内含长文本，最好给它加上min-width:0配合处理，或者对内部内容做overflow:hidden、text-overflow:ellipsis处理，防止内容把固定宽度顶开——后面讲常见问题时会展开。
经典场景二：导航栏中间logo固定、两侧自适应
网页顶部导航栏经常要求这样的效果：左边菜单和右边用户区弹性伸缩，中间的logo始终保持固定宽度并居中。这种情况就是多个弹性元素和一个固定元素的组合：
<style>
.navbar {
display: flex;
align-items: center;
height: 60px;
padding: 0 20px;
}
.nav-left, .nav-right {
flex: 1; /* 两侧平分剩余空间 */
display: flex;
align-items: center;
gap: 16px;
}
.nav-right {
justify-content: flex-end;
}
.logo {
flex: none; /* logo固定宽度 */
width: 120px;
text-align: center;
font-weight: bold;
}
</style>
<nav class="navbar">
<div class="nav-left"><a href="#">首页</a><a href="#">产品</a></div>
<div class="logo">BRAND</div>
<div class="nav-right"><a href="#">登录</a></div>
</nav>两侧元素都设置flex:1且基准尺寸为0，所以它们平分的剩余空间是相等的，logo因此始终处于视觉中心。如果两侧希望按不同比例分配，可以一边写flex:2一边写flex:1，放大因子会按2:1的比例切分剩余空间，这个特性在做不对称布局时非常实用。
还要注意子元素内部的排版。flex容器的直接子元素虽然宽度解决了，但它们内部如果还有多个项目，通常会在子元素上再嵌套一层display:flex，形成flex嵌套。嵌套层数不宜过深，一般两层就够用了，层数多了会增加调试难度。
经典场景三：三栏布局，中间弹性两侧固定
左栏220像素、右栏300像素、中间自适应的三栏结构，用flex实现比传统的浮动加负边 margin 方案简洁得多：
.layout {
display: flex;
gap: 16px;
}
.left-panel {
flex: none;
width: 220px;
}
.center-panel {
flex: 1;
min-width: 0; /* 关键：允许收缩到内容宽度以下 */
}
.right-panel {
flex: none;
width: 300px;
}这里的min-width:0是本例的核心要点。flex子元素默认min-width:auto，意味着最小宽度不能小于内容的最小尺寸。中间栏如果放了一个长表格或者一段不换行的英文，内容的最小宽度可能超过分配到的空间，结果就是中间栏把左右两个固定栏挤变形，或者容器整体溢出。显式设置min-width:0之后，flex布局的宽度分配才能严格执行。
gap属性也是现代flex布局的得力助手，它直接处理子元素之间的间距，不用再给每个子元素写margin再处理首尾元素多出来的间距问题，代码干净很多。目前主流浏览器均已支持，可以放心使用。
常见问题排查与解决
固定宽度元素被压扁。原因通常是只写了width而没控制收缩行为，子元素默认flex-shrink:1，空间不足时会跟着一起收缩。解决办法就是补上flex:none，明确告诉浏览器这个元素既不放大也不收缩。
自适应元素宽度不均。多个写flex-grow:1的元素宽度不一致，多半是它们的内容初始宽度不同，而flex-basis:auto让内容宽度参与了计算。统一改写成flex:1，基准尺寸归零后各元素就会严格等分。
文字溢出把布局顶开。长单词、长URL不换行时会把flex子元素撑到超出预期。组合拳是：外层min-width:0，内层overflow:hidden加text-overflow:ellipsis加white-space:nowrap，需要换行的场景则用word-break:break-all处理长字符串。
垂直方向内容被拉伸。flex容器默认align-items:stretch，子元素会等高。如果希望固定宽度元素保持内容高度，记得设置align-items:flex-start或按需调整对齐方式。
总的来说，固定与弹性宽度混合的核心口诀就一句话：固定的一端用flex:none加width锁死，弹性的一端用flex:1加min-width:0兜底。掌握这个组合，再配合gap和嵌套flex，绝大多数两栏、三栏乃至更复杂的界面骨架都能轻松搭出来。