在HTML和CSS中,flex: 1
是一个缩写属性,用于在一个使用Flexbox布局的容器内的子元素上。这个属性实际上是设置了三个不同的Flexbox属性:flex-grow
,flex-shrink
和 flex-basis
。
当你在一个flex项目(flex item)上设置 flex: 1
,它相当于设置了以下属性:
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
这些属性的含义如下:
-
flex-grow
: 定义flex项目的扩展比率。设置为1意味着flex项目会扩展以填充任何剩余的空间。如果有多个flex项目都设置了flex-grow
,它们会根据各自的flex-grow
值的比例分配剩余空间。 -
flex-shrink
: 定义当容器空间不足时,该flex项目的缩小比率。设置为1表示当空间不足时,该项目可以缩小。如果所有子项都设置了flex-shrink
为1,则它们会等比例缩小以适应容器空间。 -
flex-basis
: 设置flex项目在分配剩余空间之前的默认大小。当设置为0%时,它会根据项目的内容大小来确定基础大小,但是实际上,由于flex-grow
是1,所以项目会扩展以填充多余的空间,而不仅仅是依据它的内容大小。
因此,当你设置 flex: 1
时,你告诉浏览器这个flex项目应该能够伸展来占据任何额外的空间,并且在需要时也可以缩小,而且不考虑它的初始大小。这使得 flex: 1
成为创建灵活布局中等分空间的常用方法。