Flex布局：flex属性详解 (flex和flex-grow的区别？)

---

2023-06-28：发现一篇很好的Flex教程：A Complete Guide to Flexbox 图文并茂，十分推荐阅读

---

flex简介

flex是个简写属性(像border也是个简写属性)，在一个声明里设置 flex-grow、flex-shrink 和 flex-basis 属性，用以设置或检索弹性盒模型对象的子元素如何分配空间。

注：如果元素不是"弹性盒模型对象的子元素"，则 flex 属性不起作用。(弹性盒模型对象，即声明了display:flex或display: inline-flex的元素，这个元素被称为伸缩容器)

常见定义形式

先列举看几种定义形式对应的关系，[参考链接，但是这个链接里是有错误的，对应关系以我的为准]，未定义的子属性就是子属性本身的默认值

定义flex	描述	flex-grow	flex-shrink	flex-basis
initial 默认值	=>	0	1	auto
flex:inherit	从父元素继承 =>	继承父	继承父	继承父
flex:auto	=>	1	1	auto
flex:none	=>	0	0	auto
flex:none	=>	0	0	auto
flex:非负数字x	视为 flex-grow 值 =>	x	1	auto
flex:一个长度或百分比z	视为 flex-basis 值 =>	0	1	z
flex:两个非负数字x,y	依次视为 flex-grow 和 flex-shrink 的值 =>	x	y	auto
flex:一个非负数字和一个长度或百分比x,z	依次视为 flex-grow 和 flex-basis 的值 =>	x	1	z
flex:两个非负数字x,y 一个长度或百分比z	依次视为三个属性的值 =>	x	y	z

属性详解+示例

依照菜鸟教程演示编写

flex-grow

定义项目的放大(扩展)比例，即定义对剩余空间(如果有的话)的分配。对弹性容器内的元素，在当前列除自身宽度之外若还有剩余空间，而设定的分配。

• 默认为0，即如果存在剩余空间，也不放大。
• 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间。
• 如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

下面这个示例比较全面，自行观察flex-grow设置为1、3、0的区别；以及设置为0但有内容和无内容的区别。

设置为小数时。挺有意思，其实每个子元素的算法是：(自身的flex-grow/各flex-grow之和)*剩余空间

---

flex-shrink

定义项目的收缩比例：对弹性容器内的元素，如果所有子元素的宽的总和超过了弹性容器设定的宽width，那么该属性分配元素的收缩比例。

• 默认为1，即每个子元素收缩比例相同，但不会忽略内容(如果元素中的内容超过了容器的宽，那么容器会被撑开)
• 如果一个项目的flex-shrink属性为1，其他项目都为2，且所有项目的宽超过了容器设定的width，则所有项目的宽将在原基础进行收缩，后者进行收缩的量为前者的两倍。但是不会忽略内容，内容会占据实实在在的宽度

flex-basis

默认值auto，即项目本来的大小。(菜鸟教程)

和width不同。flex-basis用于设置或检索弹性盒伸缩基准值(菜鸟教程)。

推荐这篇文章：flex-basis表示在flex子元素 被放入flex容器之前的大小，是子元素的理想或者假设大小但是并不是其真实大小，其真实大小取决于flex容器的宽度、flex子元素的min-width,max-width等其他样式

flex-basis的应用准则

参考链接

Flex 子元素的应用准则：content –> width –> flex-basis (limted by max|min-width)。即：

• 如果没有设置flex-basis属性，那么flex-basis的大小就是项目的width属性的大小
• 如果没有设置width属性，那么flex-basis的大小就是项目内容(content)的大小

min-width和max-width可以限制flex子元素伸缩的下限和上限

注意：一旦设置了flex-grow或flex-shrink，那么flex子元素里的width、flex-basis，都是收缩或扩大的基准值。

• 如果内容宽度小于设定的flex-basis或width，那么实际宽度就是设定的值。
• 如果内容的宽大于设定的flex-basis或width，那么并不能起到设置宽度的作用。

常见用法

假设场景如下图：在一个flex容器中，标题和价格要上-空白-下的布局

这时应该这么写

.goods-info {		
	display: flex;
	align-content: space-between;
	flex-wrap: wrap;
	
	.top{
	}
	.low {
	}
}

但如果是这种情况，内容太少，达不到换行的要求。就会出现下面的情况

解决办法就是利用flex-basis或width

.goods-info {		
	display: flex;
	align-content: space-between;
	flex-wrap: wrap;
	
	.top{
	}
	.low {
		flex-basis:100%; 
		//或;
		width:100%;
	}
}

[附] flex布局思维导图

---