使用flex布局可实现固定与弹性宽度混合布局。设置display: flex后，固定宽元素用width加flex: 0 0 auto，弹性元素用flex: 1，即可让主内容自动填充剩余空间，适用于侧边栏固定、内容自适应的常见页面结构。
在使用CSS Flex布局时，经常需要让某些子元素保持固定宽度，而其他元素根据剩余空间自动伸缩。这种固定与弹性宽度的混合布局非常实用，比如侧边栏固定宽、内容区自适应的常见页面结构。
要实现混合宽度布局，先确保父容器启用Flex布局：
.container {
display: flex;
width: 100%;
}
这样所有直接子元素都会成为Flex项目，参与弹性布局。
对于不需要伸缩的元素，例如侧边导航或工具栏，可以直接设置固定宽度：
立即学习“前端免费学习笔记（深入）”；
.sidebar {
width: 200px; /* 固定宽度 */
flex: 0 0 auto; /* 防止伸缩 */
}
flex: 0 0 auto 表示不放大（flex-grow: 0）、不缩小（flex-shrink: 0）、基础尺寸为auto（由width决定）。这能确保它始终维持设定的宽度。
主内容区域希望填满剩余空间，可以这样设置：
.main-content {
flex: 1; /* 占据剩余空间 */
}
当只有一个弹性项时，flex: 1 等价于 flex: 1 1 0%，表示它会按比例分配可用空间。即使没有明确设置width，也能自动撑开。
假设一个布局包含左侧固定菜单、中间自适应内容、右侧固定操作栏：
.container {
display: flex;
}
<p>.menu {
width: 80px;
flex: 0 0 auto;
}</p><p>.content {
flex: 1;
}</p><p>.actions {
width: 120px;
flex: 0 0 auto;
}</p>此时，.content 会自动占据除左右两个固定宽度之外的所有空间。无论屏幕大小如何变化，菜单和操作栏保持原宽，内容区动态调整。
这种组合方式灵活且兼容性好，适用于大多数需要部分固定、部分响应式的界面设计。基本上就这些，掌握 flex 属性的简写含义是关键。
以上就是CSS Flex弹性布局子元素固定与弹性宽度混合应用的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
594
收藏
