CSS Flexbox是现代前端布局中常用的弹性盒模型，通过它可以轻松实现子元素的排列、对齐和空间分配，其中子元素的自适应宽度是Flexbox的核心能力之一，掌握相关属性的用法能让布局适配更加灵活。
Flexbox自适应宽度的核心属性
Flexbox子元素的宽度自适应主要通过flex属性及其三个子属性控制，这三个子属性分别是flex-grow、flex-shrink、flex-basis，下面分别介绍它们的作用。
1. flex-grow：分配剩余空间
flex-grow用来定义子元素的放大比例，默认值为0，即当有剩余空间时，子元素不会放大。如果所有子元素的flex-grow值之和大于1，那么剩余空间会按照比例分配给各个子元素。
2. flex-shrink：处理空间不足
flex-shrink用来定义子元素的缩小比例，默认值为1，即当空间不足时，子元素会按比例缩小。如果设置为0，那么空间不足时该子元素不会缩小。
3. flex-basis：初始尺寸
flex-basis用来定义子元素在分配多余空间之前占据的主轴空间，默认值为auto，即子元素的本来大小。可以设置为具体的像素值或者百分比。
flex简写属性的用法
实际开发中我们通常使用flex简写属性来同时设置三个子属性，语法为flex: flex-grow flex-shrink flex-basis，后两个属性可以省略，默认值分别为1和0%。下面列举几个常用的简写值：
flex: 1：等价于flex: 1 1 0%，子元素会平分剩余空间flex: auto：等价于flex: 1 1 auto，子元素会根据自身内容调整，同时可以放大缩小flex: none：等价于flex: 0 0 auto，子元素不会放大也不会缩小，尺寸由自身内容决定
不同场景的自适应实现示例
场景一：所有子元素平分容器宽度
当容器内有多个子元素，希望它们平分容器宽度时，可以给每个子元素设置flex: 1。
/* 容器样式 */
.container {
display: flex;
width: 100%;
height: 100px;
border: 1px solid #ccc;
}
/* 所有子元素平分宽度 */
.item {
flex: 1;
border: 1px solid #f00;
}
<div class="container">
<div class="item">子元素1</div>
<div class="item">子元素2</div>
<div class="item">子元素3</div>
</div>
场景二：固定宽度元素+自适应剩余空间元素
如果左侧有一个固定宽度的侧边栏，右侧内容区域需要自适应剩余宽度，可以给侧边栏设置固定宽度，右侧内容设置flex: 1。
.container {
display: flex;
width: 100%;
height: 200px;
border: 1px solid #ccc;
}
/* 固定宽度的侧边栏 */
.sidebar {
width: 200px;
flex-shrink: 0; /* 防止空间不足时被缩小 */
background-color: #eee;
}
/* 自适应剩余空间的内容区 */
.content {
flex: 1;
background-color: #f5f5f5;
}
<div class="container">
<div class="sidebar">固定侧边栏</div>
<div class="content">自适应内容区域</div>
</div>
场景三：按内容多少自适应宽度
如果希望子元素宽度根据自身内容多少自动调整，不需要平分空间，可以给子元素设置flex: auto，这样子元素会先按照自身内容占据空间，有剩余空间时再放大，空间不足时缩小。
.container {
display: flex;
width: 100%;
height: 100px;
border: 1px solid #ccc;
}
.item {
flex: auto;
border: 1px solid #f00;
margin: 0 5px;
}
<div class="container">
<div class="item">短内容</div>
<div class="item">这是一段比较长的内容</div>
<div class="item">中等长度内容</div>
</div>
注意事项
在使用Flexbox实现子元素自适应宽度时，需要注意flex-basis的优先级高于width属性，如果同时设置了flex-basis和width，flex-basis会生效。另外如果子元素内部有固定宽度的内容，可能会影响自适应效果，此时可以配合min-width: 0或者overflow: hidden来避免内容撑开容器。