CSS篇：Flex布局核心属性详解：flex-grow/shrink/basis到底怎么用？

🎓 作者简介 ： 前端领域优质创作者

🚪 资源导航： 传送门=>

🎬 个人主页： 江城开朗的豌豆

🌐 个人网站: 江城开朗的豌豆 🌍

📧 个人邮箱: [email protected] 📩

💬 个人微信: y_t_t_t_ 📱

📌 座右铭: 生活就像心电图，一帆风顺就证明你挂了。 💔

👥 QQ群: 906392632 (前端技术交流群) 💬

一、为什么我们需要理解flex的三个参数？

在Flex布局中，flex这个简写属性看似简单，却让不少开发者感到困惑。flex: 1、flex: 0 1 auto、flex: 0 0 200px这些写法到底有什么区别？理解这三个参数的含义，能让我们真正掌握Flex布局的精髓，实现各种复杂的伸缩布局效果。

二、flex属性的三种写法

1. 单值写法

css 复制代码

.item {
  flex: 1; /* 等价于 flex: 1 1 0 */
}

2. 双值写法

css 复制代码

.item {
  flex: 1 0; /* 等价于 flex: 1 0 0 */
}

3. 三值写法（完整形式）

css 复制代码

.item {
  flex: 0 1 100px; /* flex-grow | flex-shrink | flex-basis */
}

三、三个核心参数详解

1. flex-grow（扩展比例）

定义：当容器有剩余空间时，项目的放大比例
特点：

默认值为0（不放大）
接受无单位数值
按比例分配剩余空间

css 复制代码

/* 示例：三个项目按2:1:1的比例分配剩余空间 */
.item1 { flex-grow: 2; }
.item2 { flex-grow: 1; }
.item3 { flex-grow: 1; }

2. flex-shrink（收缩比例）

定义：当空间不足时，项目的缩小比例
特点：

默认值为1（允许缩小）
0表示不缩小
按比例收缩（数值越大收缩越多）

css 复制代码

/* 示例：第一个项目不缩小，其他项目正常缩小 */
.item1 { flex-shrink: 0; }
.item2, .item3 { flex-shrink: 1; }

3. flex-basis（基准大小）

定义：项目在分配多余空间之前的初始大小
特点：

默认值为auto（项目本来的大小）
可以设置具体长度（px/%等）
设为0时，空间分配更可控

css 复制代码

/* 示例：项目初始宽度为200px */
.item { flex-basis: 200px; }

四、典型场景解析

场景1：固定宽度+自适应布局

css 复制代码

.sidebar {
  flex: 0 0 250px; /* 不放大不缩小，固定250px */
}
.content {
  flex: 1; /* 自动填充剩余空间 */
}

场景2：等分剩余空间

css 复制代码

.items {
  flex: 1; /* 所有项目等分空间 */
}

场景3：比例分配空间

css 复制代码

.item1 { flex: 2; } /* 占2份 */
.item2 { flex: 1; } /* 占1份 */
.item3 { flex: 1; } /* 占1份 */

场景4：防止内容挤压

css 复制代码

.item {
  flex: 0 1 auto; /* 可以缩小但不放大，保持内容宽度 */
}

五、常见问题解答

Q1：flex: 1和flex: auto有什么区别？

flex: 1 → flex: 1 1 0（从0基准开始分配）
flex: auto → flex: 1 1 auto（从内容宽度开始分配）

Q2：为什么flex-basis设为0有时更好？

设为0可以消除项目本身大小的影响，使空间分配完全由flex-grow控制

Q3：flex-shrink设置为0会有什么影响？

项目将不会缩小，可能导致溢出容器

六、实用技巧

响应式布局：

css 复制代码

@media (max-width: 768px) {
  .item { flex: 0 0 100%; }
}

内容保护：

css 复制代码

.item {
  flex: 0 1 auto;
  min-width: 0; /* 防止文本溢出 */
}

表单布局优化：

css 复制代码

.form-item {
  flex: 1 1 200px; /* 最小200px，可以伸缩 */
}

七、总结

理解flex属性的三个参数，是掌握Flex布局的关键：

flex-grow：控制"多吃"剩余空间的能力
flex-shrink：控制"挨饿"时的忍耐度
flex-basis：决定初始"体型"大小

记住这个比喻：把Flex容器比作一个可伸缩的盒子，项目就像里面的弹簧：

flex-grow决定弹簧能拉多长
flex-shrink决定弹簧能压多短
flex-basis是弹簧的自然长度

你在项目中用过哪些巧妙的flex参数组合？欢迎在评论区分享你的经验！