flex属性是flex-grow、flex-shrink和flex-basis的简写，用于控制弹性项目在主轴上的伸缩行为；常见写法如flex:1（等比拉伸）、flex:auto（内容决定尺寸）、flex:none（不伸缩）；flex-grow定义剩余空间的分配比例，flex-shrink决定项目在空间不足时的收缩比例，flex-basis设置项目伸缩前的基准尺寸；三者协同实现灵活布局。
在使用 CSS Flexbox 布局时，flex 属性是控制子元素如何分配容器空间的核心工具之一。它决定了弹性项目（flex item）的伸缩比例，让布局更加灵活和响应式。
flex 属性的基本作用
flex 是 flex-grow、flex-shrink 和 flex-basis 三个属性的简写，用于定义项目在主轴方向上的伸缩行为。
语法格式如下：
flex: [flex-grow] [flex-shrink] [flex-basis];
常见写法有：
立即学习“前端免费学习笔记（深入）”；
TextCortex
AI写作能手，在几秒钟内创建内容。
62 查看详情 flex: 1 —— 常用于等比拉伸，等同于 flex: 1 1 0%; flex: auto —— 等同于 flex: 1 1 auto，内容决定基础尺寸，可伸缩 flex: none —— 不伸缩，等同于 flex: 0 0 auto flex: 2 —— 该项目的拉伸比例是其他 flex:1 项目的两倍
flex-grow 控制扩展比例
当容器有剩余空间时，flex-grow 决定项目如何“拉伸”来填充空间。
默认值为 0，表示不扩展 设置为 1 或更大时，项目将按比例分配剩余空间 例如：两个项目分别设置 flex-grow: 1 和 flex-grow: 2，后者将获得两倍于前者的扩展空间
flex-shrink 控制收缩比例
当所有项目总尺寸超过容器时，flex-shrink 决定它们如何“压缩”以适应容器。
默认值为 1，表示可正常收缩 设为 0 时，项目不会被压缩，可能溢出容器 数值越大，压缩得越厉害。比如 flex-shrink: 3 的项目比 flex-shrink: 1 的压缩更多
flex-basis 设置基准尺寸
flex-basis 相当于项目在伸缩前的“初始大小”，可以是长度值或百分比。
类似 width，但作用于主轴方向 常见值如 100px、20%、auto（根据内容自动调整） 当设为 0 时，空间分配更均匀（常用于 flex: 1 这类场景）
基本上就这些。理解 flex 属性的关键是明白它是 grow、shrink、basis 的组合，三者协同工作，才能实现真正灵活的布局。实际开发中，常用简写形式快速设置，比如 flex: 1 实现均分空间，flex: none 防止压缩等，掌握这些模式就能高效使用 Flexbox。
以上就是css Flexbox伸缩比例flex属性讲解的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/974292.html
微信扫一扫 
支付宝扫一扫 
