Flex布局-彻底掌握 flex-grow / flex-shrink / flex-basis

目录

• 学习目标：
• 学习内容：
• flex-grow（分配剩余空间）
• flex-shrink（收缩比例）
• flex-basis（基础宽度）
• [flex:1 的真正含义](#flex:1 的真正含义)
• 总结

学习目标：

• 掌握 flex-grow / flex-shrink / flex-basis
• 理解 flex:1 到底等于什么

---

学习内容：

1. flex-grow
2. flex-shrink
3. flex-basis
4. flex:1 的真正含义

---

flex-grow（分配剩余空间）

grow = 扩张因子
代表在容器有剩余空间时，该原色站多少"份额"

flex-grow:1; //

举个例子:

例子1：假如现在有300px的宽度容器。容器包含 A和B两个div,通过flex-grow分别给A和B设置值为1和2，那么A和B会瓜分者300px宽度，A和B分别占比时1/2，也就是A的宽度是100px,B的宽度是200px。

.container{
	width:300px;
	display:flex;
	.A{
		flex-grow:1;
	}
	.B{
		flex-grow:2;
	}
}

flex-shrink（收缩比例）

shrink = 挤压因子

当空间 不足 时：
shrink 越大 → 越容易被压缩, shrink 越小 → 越不容易变小(当flex-shrink:0时，宽度不会被压缩)

flex-basis（基础宽度）

flex-basis 相当于：

flex 参与计算前的"初始宽度"

• flex-basis: auto（默认） → 看 width

• flex-basis: 100px → 强制用 100px 作为 flex 起点

flex-basis不是容器最小和最大宽度，而是设置flex计算宽度一个初始值。最终项目(item)的宽度时根据父元素的宽度和项目元素的宽度计算得到的。

例子2：

1. 假设容器宽度是 500px
   三个项目：

A: flex: 1 1 100px;
B: flex: 1 1 100px;
C: flex: 1 1 100px;

2. 使用 flex-basis 计算"初始宽度"

	A: 100px  ← basis
	B: 100px
	C: 100px
	--------------------
	初始总宽度 = 300px

3. 比较容器宽度
   容器宽度：500px
   初始总宽度：300px
   剩余空间 = 500 - 300 = 200px
4. 根据 flex-grow 分配剩余空间

	grow 值都是 1，那么分配方式
	200px 剩余空间
	每个 grow=1 → 平均分
	
	A: +66px
	B: +66px
	C: +66px

5. 最终宽度 = basis + grow 得到的份额

A: 100 + 66 = 166px
B: 100 + 66 = 166px
C: 100 + 66 = 166px

也就是：

⭐⭐ 最终宽度 不是 100px

⭐⭐ flex-basis 只是初始值

⭐⭐ 最终宽度是"flex 算法计算出来的"

6. 最终图示（文字版图形）

|------- 500px -------|

|--166--|--166--|--166--|
   A        B        C

flex:1 的真正含义

flex:1其实就是上面三种方式的简写形式。代表着flex-grow:1，flex-shrink:1和flex-basis：0

总结

希望对大家有帮助，我也夯实一下基础。谢谢