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

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

🚪 资源导航： 传送门=>

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

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

📧 个人邮箱: YANG_TAO_WEB@163.com 📩

💬 个人微信:     y_t_t_t_ 📱

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

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

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

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

二、flex属性的三种写法

1. 单值写法

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

2. 双值写法

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

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

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

三、三个核心参数详解

1. flex-grow（扩展比例）

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

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

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

2. flex-shrink（收缩比例）

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

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

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

3. flex-basis（基准大小）

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

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

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

四、典型场景解析

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

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

场景2：等分剩余空间

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

场景3：比例分配空间

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

场景4：防止内容挤压

.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会有什么影响？
项目将不会缩小，可能导致溢出容器

六、实用技巧

1. 响应式布局：

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

2. 内容保护：

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

3. 表单布局优化：

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

七、总结

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

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

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

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

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