Flex布局子元素宽度设置技巧

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《Flex布局子元素固定与弹性宽度应用》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

使用flex布局可实现固定与弹性宽度混合布局。设置display: flex后，固定宽元素用width加flex: 0 0 auto，弹性元素用flex: 1，即可让主内容自动填充剩余空间，适用于侧边栏固定、内容自适应的常见页面结构。

在使用CSS Flex布局时，经常需要让某些子元素保持固定宽度，而其他元素根据剩余空间自动伸缩。这种固定与弹性宽度的混合布局非常实用，比如侧边栏固定宽、内容区自适应的常见页面结构。

基本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 属性的简写含义是关键。

好了，本文到此结束，带大家了解了《Flex布局子元素宽度设置技巧》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！