零基础学 flex-grow：5分钟搞懂这个神奇属性

原创 于 2025-12-17 11:24:28 发布 · 296 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

快速体验

  1. 打开 InsCode(快马)平台 https://www.inscode.net
  2. 输入框内输入如下内容： 
    制作一个交互式学习页面，通过可视化方式解释 flex-grow：1) 显示三个彩色方块初始状态；2) 添加滑块控件让用户调整每个方块的 flex-grow 值（0-5）；3) 实时显示空间分配比例和计算过程；4) 提供预设示例（如1:2:1、0:1:1等）一键演示。使用生动动画和简单语言解释概念。
  3. 点击'项目生成'按钮，等待项目生成完整后预览效果

示例图片

最近在学CSS布局时，发现flex-grow这个属性特别有意思。作为一个刚入门的前端小白，我一开始完全搞不懂它是怎么分配空间的。后来通过自己动手做了一个可视化的小项目，终于弄明白了它的工作原理。今天就和大家分享这个学习过程，保证用最直白的方式讲清楚。

1. 理解flex-grow的基本概念

flex-grow是Flexbox布局中的一个属性，它决定了当容器有剩余空间时，子元素如何分配这些空间。简单来说：

  • 默认值是0，表示不占用剩余空间
  • 大于0的值表示按比例分配空间
  • 所有子元素的flex-grow值相加后按比例分配

2. 创建可视化学习工具

为了更好地理解这个概念，我决定做一个交互式页面。这个工具包含三个彩色方块（红黄蓝），直观展示空间分配效果：

  1. 初始状态下三个方块宽度相同
  2. 为每个方块添加滑块控件（0-5可调）
  3. 实时显示当前空间分配比例
  4. 添加预设比例按钮方便快速体验

3. 实现关键功能细节

在实现过程中，有几个关键点需要注意：

  1. 容器要设置为display: flex
  2. 子元素初始宽度设为相同值
  3. 通过JavaScript监听滑块变化
  4. 实时计算并显示分配比例
  5. 添加平滑的过渡动画效果

4. 常见问题与解决

在开发过程中遇到了一些典型问题：

  • 当所有flex-grow都为0时，空间不会分配，保持初始宽度
  • 如果只有一个元素设置了flex-grow，它会占据全部剩余空间
  • 比例计算是基于所有flex-grow值的总和
  • 需要处理好极端值情况（如全设为0）

5. 实际应用场景

理解了原理后，flex-grow在响应式布局中特别有用：

  1. 导航栏项目自动填充剩余空间
  2. 卡片布局中的弹性伸缩
  3. 实现等高分栏效果
  4. 内容区域自适应布局

通过这个小项目，我不仅掌握了flex-grow的用法，还加深了对Flexbox整体布局的理解。实际操作比单纯看文档要有效得多。

最近发现InsCode(快马)平台特别适合做这类前端学习项目，内置编辑器可以直接预览效果，还能一键部署分享给朋友看。我做的这个flex-grow演示项目就是在这里完成的，不用配置环境真的很省心。示例图片

快速体验

  1. 打开 InsCode(快马)平台 https://www.inscode.net
  2. 输入框内输入如下内容： 
    制作一个交互式学习页面，通过可视化方式解释 flex-grow：1) 显示三个彩色方块初始状态；2) 添加滑块控件让用户调整每个方块的 flex-grow 值（0-5）；3) 实时显示空间分配比例和计算过程；4) 提供预设示例（如1:2:1、0:1:1等）一键演示。使用生动动画和简单语言解释概念。
  3. 点击'项目生成'按钮，等待项目生成完整后预览效果

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

小程序开发框架响应式设计：适配多端屏幕
小程序开发
06-30 793
本文旨在为小程序开发者提供一套完整的响应式设计解决方案，涵盖从基础原理到高级实践的完整知识体系。我们将重点讨论微信小程序框架，但这些原则同样适用于其他小程序平台。核心概念与联系：介绍响应式设计的基本原理技术实现方案：详细讲解各种适配技术实战案例：通过完整项目演示适配过程进阶技巧与未来趋势响应式设计：一种使页面能够自动适应不同屏幕尺寸的设计方法视口(Viewport)：用户可见的网页区域，在小程序中对应屏幕显示区域设备像素比(DPR)：物理像素与逻辑像素的比值核心概念回顾。
Flex-box入门---flex-grow, flex-shrink, flex-basis
dizheng2246的博客
07-30 231
Block Elements and inline elements(块元素和行内元素) 在进入正题之前，我们先来简单总结一下传统的block元素和inline元素。 HTML中的block元素显示在页面上时总会另起一行，并占满它的父元素的整个宽度；block元素的宽高可以通过width和height来设置； inline元素正好相反，它们不会另起一行，只会占展示内容所需的...
神奇的flex+margin:auto
Brilliant Me 的博客
08-19 3567
flex布局相信是大家现在开发中比较常使用的一种布局了，使用flex布局进行垂直水平居中相信大家都已经很熟悉了。相信下边的代码大家已经屡见不鲜了。 div { width: 100px; height: 100px; background-color: black; display: flex; align-items: center; ...
Flex布局中 flex: 1 的含义？Grid布局如何实现三栏自适应？
前端大白话
07-12 644
凌晨三点，设计稿上的三栏布局在你的屏幕上歪歪扭扭——左侧栏被内容撑得变形，中间区域在小屏手机上跑到了底部，右侧广告栏固执地霸占着200px宽度不肯让步。作为前端工程师，你是否也曾对着浏览器调试工具叹气："明明加了flex:1，怎么就不能好好平分空间？" 布局问题就像前端开发中的慢性头痛，而Flex和Grid布局就是医生开的两剂特效药。但很多时候，我们拿着药却不知道正确的服用方法——flex:1到底是三个属性的简写还是一个神奇的开关？Grid布局实现三栏自适应时，为什么加了media query反而更乱？
Web前端入门第 35 问：CSS 细说 flex 弹性盒子布局（多图）
weixin_41440971的博客
05-20 48
就目前来看 flex 布局比 grid 布局应用得更多，虽然 grid 是终极手段，但由于兼容性问题，反而是 flex 应用更广泛。虽然 flex 规范出现的时间较早，但由于 CSS 版本不停迭代，目前也有一些较新的属性值，如果要求兼容低版本浏览器，建议使用前先查阅相关兼容性文档。原创作者: linx转载于: https://www.cnblogs.com/linx/p/188279961.Web前端入门第1问：英语是否很重要？有哪些前置条件？02-28。
神奇的flex布局
baidu_41601048的博客
05-15 505
flex布局实现几个常见应用： 1 实现两端对齐，从第二行还是左对齐。 代码如下： <divclass="box"> <divclass="item"></div> <divclass="item"></div> <divclass="item"></div> <divclass="item"></div> ...
2022年重学Flex布局
qzznds的博客
01-04 437
一、引言 上周面试了一名从某某培训机构毕业出来的小伙伴，应聘前端工程师的职位，简历上写着精通html5+css3，可手写轮播图、导航栏等等。第一印象还不错，面试过程中就问了几个简单的技术知识，一个是如何让文字垂直居中？一个是写一个类似知乎头部的布局样式？就是想考验下小伙伴对flex弹性布局相关的基础知识，面试结果不是很满意（还问了一些关于简历中提到的js,vue相关的基础知识）。回想自己刚入门div+css布局的时候，垂直居中问题一直困扰着我，贼难搞高，自从与flex邂逅，妈呀，真香......
Web前端入门第 36 问：多图细说 CSS grid 网格布局（一）父元素容器相关属性
weixin_41873237的博客
05-07 62
使用column-gap定义列间距，使用row-gap定义行间距，让子元素别离太近，有点边界感：它俩都可食用所有 CSS 支持的单位~.box {效果：使用gap.box {gap: 20px只有一个值时，表示行列间距都为 20px。父元素容器相关属性相关的 CSS 本文介绍完毕，作者也跟着学了一遍网格布局，以前似懂非懂的属性，现在嘛多少略知一二了，子元素相关的属性还有一大波，请看下回分解...
flex 移动开发 html5,[ html5 ] 移动端适配方案 flex布局+rem布局
weixin_30661579的博客
06-10 404
viewport视口viewport是严格的等于浏览器的窗口。viewport与跟viewport有关的meta标签的关系，详细建议读一读这篇文章：移动前端开发之viewport的深刻理解，viewport与布局的关系，能够看下这篇文章：在移动浏览器中使用viewport元标签控制布局css1. flex布局flex简介之因此把flex布局放在第一位，是由于它在某些场景下确实很方便，好比垂直居中，...
flex布局学习笔记：flexbox--持续维护中
好好做前端
05-19 663
兼容性先放在这里：引自 Using Flexbox: Mixing Old and New for the Best Browser Support 、最佳浏览器兼容父元素{ display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy bu
10分钟掌握Flex布局：前端开发效率提升3倍的秘密武器！
Where there is a will, there is a way !
05-27 1203
本文详解Flex布局核心原理与实战技巧，从基础概念到避坑指南，从经典案例到进阶应用，帮助前端开发者10分钟掌握现代CSS布局精髓，实现开发效率3倍提升。
神奇的FlexBox弹性布局
雾林小妖的博客
03-24 1391
FlexBox弹性布局使用详解，代码+截图
Flexbox魔法世界
m0_72030584的博客
05-13 1008
Flexbox魔法世界：纵向排列与属性探索
CSS基础教程（二十二）尺寸 (Dimension)：别再px到用时方恨少！深度解剖CSS尺寸的“魔法”与“玄学”
jxf_jxfcsdn的博客
09-11 489
在CSS的宇宙里，尺寸单位绝非简单的数字游戏。px、em、rem、vw/vh... 它们是谁？来自何方？去往何处？本文将带你跳出“像素工程师”的思维定式，深入探讨CSS尺寸的绝对与相对哲学。从盒模型的“薛定谔的宽度”到min-content的智能收缩，从视口单位的响应式魔法到flex-grow的分配艺术。我们不仅剖析原理，更附上可一键复制的完整示例，让你彻底掌握如何用最合适的尺寸工具，精准拿捏页面布局的每一寸空间，从此告别布局翻车现场！
含中间直流的三相电力电子变压器PET仿真模型（Simulink仿真实现）
12-16
含中间直流的三相电力电子变压器PET仿真模型（Simulink仿真实现）内容概要：本文档介绍了含中间直流环节的三相电力电子变压器（PET）的Simulink仿真模型，重点在于构建和模拟PET系统的核心结构与工作原理。该仿真模型涵盖了PET的前级整流、中间直流环节以及后级逆变部分，能够实现电能的高效转换与隔离，适用于研究PET在智能电网、新能源接入等场景下的动态特性与控制策略。通过Simulink平台，用户可对系统进行稳态与暂态性能分析，验证控制算法的有效性。; 适合人群：电气工程、电力电子及相关专业的高校师生、科研人员以及从事电力系统仿真的工程技术人员。; 使用场景及目标：①用于教学演示电力电子变压器的工作原理；②支撑科研项目中对PET控制策略（如电压、电流双闭环控制）的设计与验证；③为新型电力系统中电能变换装置的开发提供仿真基础。; 阅读建议：建议结合电力电子技术基础知识学习本仿真模型，重点关注各模块的参数设置与控制逻辑实现，建议动手搭建模型并进行仿真实验，以加深对PET系统运行机制的理解。
考虑柔性负荷的综合能源系统低碳经济优化调度【考虑碳交易机制】（Matlab代码实现）
最新发布
12-16
考虑柔性负荷的综合能源系统低碳经济优化调度【考虑碳交易机制】（Matlab代码实现）内容概要：本文围绕“考虑柔性负荷的综合能源系统低碳经济优化调度”展开，重点研究在碳交易机制下如何实现综合能源系统的低碳化与经济性协同优化。通过构建包含风电、光伏、储能、柔性负荷等多种能源形式的系统模型，结合碳交易成本与能源调度成本，提出优化调度策略，以降低碳排放并提升系统运行经济性。文中采用Matlab进行仿真代码实现，验证了所提模型在平衡能源供需、平抑可再生能源波动、引导柔性负荷参与调度等方面的有效性，为低碳能源系统的设计与运行提供了技术支撑。; 适合人群：具备一定电力系统、能源系统背景，熟悉Matlab编程，从事能源优化、低碳调度、综合能源系统等相关领域研究的研究生、科研人员及工程技术人员。; 使用场景及目标：①研究碳交易机制对综合能源系统调度决策的影响；②实现柔性负荷在削峰填谷、促进可再生能源消纳中的作用；③掌握基于Matlab的能源系统建模与优化求解方法；④为实际综合能源项目提供低碳经济调度方案参考。; 阅读建议：建议读者结合Matlab代码深入理解模型构建与求解过程，重点关注目标函数设计、约束条件设置及碳交易成本的量化方式，可进一步扩展至多能互补、需求响应等场景进行二次开发与仿真验证。
大学怎样用AI工具3分钟生成技术成熟度报告？.docx
12-16
大学怎样用AI工具3分钟生成技术成熟度报告？
【云原生运维】基于Kubernetes的CI/CD全流程自动化：Spring Boot应用在容器化环境下的持续集成与部署实践
12-16
内容概要：本文详细展示了在Kubernetes环境下实现CI/CD全流程的完整示例，涵盖从代码提交、自动化构建、测试、安全扫描到多环境部署的各个环节。技术栈包括GitLab CI、Docker、Helm、Kustomize、Trivy等工具，并以Spring Boot应用为例，提供了Dockerfile、Kubernetes资源配置、Helm Chart结构以及蓝绿部署、金丝雀发布等高级部署策略的具体实现。同时，文章还介绍了GitOps（ArgoCD）、HPA自动扩缩容、Prometheus监控告警等增强能力，并强调了安全性、可靠性、可观测性和成本优化的最佳实践。; 适合人群：具备一定Kubernetes、容器化和DevOps基础知识，从事后端开发、运维或平台工程的技术人员，尤其是希望落地标准化CI/CD流程的团队成员； 使用场景及目标：①构建基于Kubernetes的企业级持续交付流水线；②实现安全可控的多环境自动化部署；③集成监控告警与弹性伸缩机制提升系统稳定性；④推动GitOps理念在团队中的实践落地； 阅读建议：建议结合实际Kubernetes集群环境，逐步复现文档中的各个步骤，重点关注CI/CD配置逻辑、部署策略差异及最佳实践部分，并将其适配到自身项目体系中进行持续优化。
【分布式系统】基于Redis的Session集中存储方案：实现Web服务器高可用与横向扩展
12-16
内容概要：本文介绍了基于Redis实现分布式Session的解决方案，重点阐述了将Session集中存储于Redis集群的技术思路与优势。文中指出，传统的tomcat-redis-session-manager仅适用于Tomcat容器层的HttpSession同步，存在应用层适配局限；相比之下，推荐使用Spring Session与Redis结合的方式，实现更灵活的应用层Session管理。通过将sessionId作为key、session数据作为value存储在Redis中，可在多台应用服务器间共享Session，确保高可用性和横向扩展能力。同时，文章对比了多种保证Session一致性的架构方案，包括Session同步法、客户端存储法、反向代理Hash一致性以及后端统一存储法，并强调后端统一存储为最优选择。; 适合人群：具备Java Web开发基础，熟悉分布式架构、Redis及Session机制的1-3年经验后端研发人员； 使用场景及目标：①解决传统Web服务器集群中Session不一致问题；②实现服务无状态化设计，提升系统可扩展性与容灾能力；③在微服务或负载均衡环境下构建统一的Session管理中心； 阅读建议：学习时应结合Spring Session实际集成案例，理解其与Redis的协作机制，并深入掌握不同Session共享方案的适用边界与设计权衡。
flex-grow:1
04-30
### CSS 中 `flex-grow: 1` 的用法 #### 定义与作用 `flex-grow` 是 Flexbox 布局中的一个重要属性，它定义了一个弹性项目（flex item）如何在其父容器（flex container）中有额外空间时扩展其大小。当 `flex-grow` 设置为 `1` 时，表示该弹性项目会按照比例分配父容器中剩余的空间[^3]。 如果所有的弹性项目的 `flex-grow` 都设置为相同的值，则它们将平分剩余空间；如果有不同的值，则按比例分配剩余空间[^2]。 --- #### 示例代码展示 以下是几个典型的例子来说明 `flex-grow: 1` 的实际应用： ##### 示例一：三个子元素平均分割父容器宽度 ```html <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div> <style> .container { display: flex; } .item { flex-grow: 1; /* 所有的子元素都会均分父容器的剩余空间 */ height: 50px; text-align: center; line-height: 50px; } .item:nth-child(1) { background-color: lightcoral; } .item:nth-child(2) { background-color: lightskyblue; } .item:nth-child(3) { background-color: lightgreen; } </style> ``` 在这个示例中，由于 `.item` 的 `flex-grow` 被设为 `1`，所以这三个子元素会在父容器 `.container` 中均匀分布并占据整个宽度。 --- ##### 示例二：不同权重的比例分配 ```html <div class="container"> <div class="item grow1">Item A (grow: 1)</div> <div class="item grow2">Item B (grow: 2)</div> <div class="item grow3">Item C (grow: 3)</div> </div> <style> .container { display: flex; } .item { height: 50px; text-align: center; line-height: 50px; } .grow1 { flex-grow: 1; background-color: salmon; } .grow2 { flex-grow: 2; background-color: skyblue; } .grow3 { flex-grow: 3; background-color: palegreen; } </style> ``` 在此案例中，`.grow1`, `.grow2`, 和 `.grow3` 分别设置了不同的 `flex-grow` 值。因此，剩余空间会被分成 `(1 + 2 + 3)` 即总共六份，分别由这些子元素按比例占用[^1]。 --- ##### 示例三：两栏布局 ```html <div class="wrapper"> <div class="sidebar">Sidebar</div> <div class="content">Content Area</div> </div> <style> .wrapper { display: flex; } .sidebar { width: 200px; /* 固定宽度侧边栏 */ background-color: lightgray; } .content { flex-grow: 1; /* 主要内容区域自动填充剩余空间 */ padding: 10px; } </style> ``` 这里展示了常见的两栏布局场景，其中左侧固定宽度作为导航菜单或其他功能区，右侧的内容部分通过设定 `flex-grow: 1` 来动态调整尺寸以填满其余空白区域[^4]。 --- ### 总结 综上所述，在使用 `flex-grow: 1` 这样的声明时，主要是为了实现灵活且自适应的设计方案。无论是简单的横向排列还是复杂的多列网格系统构建都可以借助这一特性轻松达成目标。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

StarfallRaven13

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值