在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 成为创建灵活布局中等分空间的常用方法。
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
