1. 理解Flexbox三大核心属性
作为一名前端开发者，我最初接触Flexbox布局时，最让我困惑的就是flex-grow、flex-shrink和flex-basis这三个属性的具体作用和相互关系。经过多个项目的实战应用，我终于摸清了它们的门道。下面我就用最直白的语言，结合具体案例，帮你彻底掌握这三个关键属性。
1.1 flex-grow：空间分配的艺术
flex-grow决定了当容器有剩余空间时，各个项目如何分配这些"多出来的地盘"。它的默认值是0，意味着"我不贪心，保持原样就好"。
css复制.item {
flex-grow: 1; /* 现在我会参与空间分配了 */
}
这里有个关键点：flex-grow的值不是绝对值，而是比例关系。比如三个项目的flex-grow分别是1、2、1，那么剩余空间会按照1:2:1的比例分配。我经常用这个特性来实现内容区域的自适应布局。
注意：flex-grow只对剩余空间有效。如果容器空间不足，它不会起作用，这时就要看flex-shrink的表现了。
1.2 flex-shrink：空间不足时的收缩策略
当容器空间不够装下所有项目时，flex-shrink就登场了。它的默认值是1，表示"我愿意牺牲自己来保全大局"。
css复制.item {
flex-shrink: 0; /* 这次我要坚守阵地，绝不退缩 */
}
收缩的计算稍微复杂些：项目会根据flex-shrink值和自身大小按比例收缩。比如一个200px的项目(flex-shrink:2)和一个100px的项目(flex-shrink:1)，当需要收缩100px时，前者会贡献约67px，后者约33px。
1.3 flex-basis：项目的起跑线
flex-basis定义了项目在分配空间前的初始尺寸，相当于给项目设定了基准线。它的默认值是auto，意味着"按我内容多少来定"。
css复制.item {
flex-basis: 200px; /* 我的起跑线就是200px */
}
这个属性有个重要特性：它会覆盖width/height属性。在Flexbox世界里，flex-basis才是老大。我常用它来设置固定宽度的侧边栏，或者给卡片布局设定最小宽度。
2. flex简写属性的实战技巧
2.1 简写语法解析
flex属性是上述三个属性的简写，格式为：flex: grow shrink basis。下面这些写法是我在项目中经常用到的：
css复制/* 默认值，不放大但可收缩，尺寸由内容决定 */
flex: 0 1 auto;
/* 经典flex:1，等分剩余空间 */
flex: 1 1 0;
/* 固定尺寸，不放大不收缩 */
flex: 0 0 250px;
/* 可放大可收缩，但最小200px */
flex: 1 1 200px;
2.2 常见简写值的实际含义
很多新手会对flex:1感到困惑，其实它等同于flex:1 1 0。这里的basis为0意味着"我不占初始空间，所有空间都参与分配"。这种写法非常适合等分布局。
另一个常用模式是flex:0 0 auto，这相当于告诉浏览器："我的尺寸固定，别动我"。我常用这种方式来固定导航栏的宽度。
3. 实际应用场景解析
3.1 经典等分布局
css复制.container {
display: flex;
}
.item {
flex: 1; /* 所有项目平分空间 */
}
这种布局在移动端特别实用。我做过一个电商首页，五个导航图标就是用这种方式完美等分的。即使屏幕尺寸变化，布局也能自动适应。
3.2 固定侧边栏+自适应内容
css复制.sidebar {
flex: 0 0 250px; /* 固定宽度250px */
}
.content {
flex: 1; /* 占据剩余所有空间 */
}
在后台管理系统中最常见这种布局。我通常会加个min-width给content，防止内容被挤压得太小。
3.3 响应式卡片布局
css复制.card {
flex: 1 1 300px; /* 最小300px，可伸缩 */
}
这种布局在商品列表页特别实用。当屏幕变小时，卡片会自动换行；有剩余空间时，卡片会适当拉伸填满容器。
4. 常见问题与解决方案
4.1 为什么我的flex:1没有效果？
这个问题我遇到过太多次了。通常有两个原因：
- 容器没有设置display:flex
- 容器本身没有剩余空间（比如height:auto）
解决方案是先确认容器确实启用了Flexbox，然后检查容器尺寸是否合理。
4.2 flex-basis和width有什么区别？
这是新手常问的问题。关键区别在于：
- flex-basis是Flexbox专用的尺寸属性
- 在Flexbox中，flex-basis会覆盖width
- 对于非Flexbox元素，flex-basis无效
4.3 如何实现不等比例分配？
通过调整flex-grow值即可。比如：
css复制.item1 { flex-grow: 2; }
.item2 { flex-grow: 1; }
这样item1会分到两倍于item2的剩余空间。
5. 高级技巧与注意事项
5.1 结合min-width/max-width使用
我经常给flex项目加上min-width来防止过度收缩：
css复制.item {
flex: 1 1 200px;
min-width: 150px; /* 无论如何不能小于150px */
}
5.2 处理内容溢出的技巧
当flex项目内容过多时，可以这样处理：
css复制.item {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
}
5.3 性能优化建议
过度使用flex布局会影响渲染性能。我的经验是：
- 避免深层嵌套的flex容器
- 对大量列表项考虑使用grid布局
- 静态布局尽量不用flex
6. 浏览器兼容性处理
虽然现代浏览器都支持Flexbox，但在旧版IE中仍需要前缀：
css复制.item {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
我在项目中通常使用PostCSS自动添加前缀，省去了手动处理的麻烦。
7. 实际项目经验分享
在最近的一个后台管理系统项目中，我遇到了一个棘手的问题：侧边栏需要固定宽度，但内容区需要自适应，同时还要保证在移动端能正常显示。最终我是这样解决的：
css复制.layout {
display: flex;
flex-direction: column;
}
@media (min-width: 768px) {
.layout {
flex-direction: row;
}
.sidebar {
flex: 0 0 200px;
}
.content {
flex: 1;
}
}
这个方案完美实现了响应式布局，在PC端是侧边栏+内容区，在移动端则自动变为上下排列。关键点在于结合媒体查询调整flex-direction。
另一个实用技巧是在卡片布局中保持等高：
css复制.card-container {
display: flex;
align-items: stretch; /* 默认值，可不写 */
}
.card {
flex: 1;
}
这样所有卡片都会自动保持相同高度，无论内容多少。我在商品展示页经常使用这种技巧。
Flexbox的强大之处在于它的灵活性。经过这些年的实践，我发现掌握好flex-grow、flex-shrink和flex-basis这三个核心属性，就能解决90%的布局问题。剩下的10%可能需要结合Grid或其他布局方式，但Flexbox绝对是现代CSS布局的基石。