在flex弹性盒子体系中，flex-grow和flex都有对子元素进行放大的作用，但是这两个属性在放大时的计算方法不同，在使用时候要注意，使用正确的放大属性，从而达到自己想要的效果。

这是一个宽700px的弹性盒子，其中红黄蓝每个子元素的宽度都为100px。我们分别使用flex-grow和flex对子元素进行放大。

使用flex进行放大

使用flex
step1：计算剩余空间，剩余空间为弹性盒子剩余宽度与进行flex的子元素的宽度之和。
例中的剩余空间为：
剩余宽度为400px ，进行flex的子元素宽度分别是100,100，所以剩余空间为600px。
step2: 按照进行flex属性值，数字的比例进行分配空间。黄色和蓝色的比例为1:2。因此其宽度分别为200px,400px。

使用flex-grow进行放大

使用flex-grow
step1：计算剩余空间，剩余空间为弹性盒子剩余宽度
例中的剩余空间为：
剩余宽度为400px
step2: 按照进行flex属性值，数字的比例进行分配空间。黄色和蓝色的比例为1:2。因此其宽度分别为133.34px ,266.66px。
step3：元素自身的宽度加上分配到的剩余空间就是放大后的宽度。因此其最终显示出来宽度分别为233.34px ,366.66px。

flex弹性盒子flex-grow 和flex的区别相关推荐

flex弹性盒子中flex-grow与flex的区别
flex弹性盒子中flex-grow与flex的区别大家在使用flex布局的时候很多情况下都会用到flex-grow这个属性, flex-grow 属性用于设置父元素剩余空间的瓜分比例, flex ...
Flex弹性盒子详解：从量变到质变的理解
Flex弹性盒子在前端css3中有个非常重要的属性,就是弹性盒子了,他在页面布局中起到的作用可谓是有着王霸之业,那么我们如何正确的使用flex布局呢?让我来介绍一下吧.我们可以将整个flex布局分成 ...
HTML+CSS_第三部分(Flex弹性盒子布局、grid网格布局、移动端、移动端流式布局、移动端rem布局、响应式布局、Bootstrap框架)
文章目录 (1)Flex弹性盒子布局一: 父容器上的属性 1. display:flex 设置为弹性盒子(写在父容器上) 2.flex-direction值设置子项的布局方向(写在父容器上) 3. ...
Flex弹性盒子（一篇带你掌握潮流 Flex 布局）
文章目录 Flex弹性盒子 1.说在前头 1.1.Flex布局出现之前 1.2.Flex布局出现后 2.什么是Flex布局? 3.Flex container/item(父/子容器)的常用属性 4.L ...
Vue.js-Day08【项目实战(附带完整项目源码)-day03：订单确认页面、美团支付页面、flex弹性盒子布局】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 实战项目源码[链接:https://pan.baidu.com/s/1r0Mje3Xnh8x4F1HyG4aQTA 提 ...
flex html 页面移动,HTML页面布局之flex弹性盒子
这里是修真院前端小课堂,本篇分析的主题是 [HTML页面布局之flex弹性盒子] 每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方 ...
自学前端第二十六天:flex弹性盒子
CSS3 弹性布局 flex(给父盒子挂flex帅,让子元素排布练阵) 1.摘自 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 布局 ...
css3移动端flex弹性盒子布局
这是两个新旧的风格. 设置弹性盒子: display: -webkit-box;(-webkit-box-flex,-webkit-box-orient:vertical,-webkit-box-al ...
flex弹性盒子模型
目录 1.弹性盒子模型可以以任意父容器为flex模型 2.他的布局位置可以在父容器中或在自身属性中 3.flex布局的优点 1.弹性盒子模型可以以任意父容器为flex模型 2.他的布局位置可以在父容器 ...

flex弹性盒子flex-grow 和flex的区别

使用flex进行放大

使用flex-grow进行放大

flex弹性盒子flex-grow 和flex的区别相关推荐

最新文章

热门文章