flex弹性盒子中flex-grow与flex的区别

大家在使用flex布局的时候很多情况下都会用到flex-grow这个属性， flex-grow 属性用于设置父元素剩余空间的瓜分比例， flex 属性是 flex-grow、flex-shrink 和flex-basis 属性的简写属性，通常我们认为flex-grow:1;与flex:1;是同一个意思，就是将子元素瓜分父容器的剩余空间1份。

但你是不是在实践中发现了二者的一点区别呢？

如下：这是一个宽700px的弹性盒子，其中红绿蓝每个子元素的宽度都为100px。

我们分别使用flex-grow和flex对子元素进行放大。

可以看出，以上得到的是不同的结果。

我们接下来用动图来演示：

1、第一个是使用flex-grow进行空间的分配

2、第二个是使用flex进行空间的分配

总结：

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

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

Flex弹性盒子详解：从量变到质变的理解
Flex弹性盒子在前端css3中有个非常重要的属性,就是弹性盒子了,他在页面布局中起到的作用可谓是有着王霸之业,那么我们如何正确的使用flex布局呢?让我来介绍一下吧.我们可以将整个flex布局分成 ...
自学前端第二十六天:flex弹性盒子
CSS3 弹性布局 flex(给父盒子挂flex帅,让子元素排布练阵) 1.摘自 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 布局 ...
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 ...
flex弹性盒子flex-grow 和flex的区别
在flex弹性盒子体系中,flex-grow和flex都有对子元素进行放大的作用,但是这两个属性在放大时的计算方法不同,在使用时候要注意,使用正确的放大属性,从而达到自己想要的效果. 这是一个宽700 ...
flex html 页面移动,HTML页面布局之flex弹性盒子
这里是修真院前端小课堂,本篇分析的主题是 [HTML页面布局之flex弹性盒子] 每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方 ...
Vue.js-Day08【项目实战(附带完整项目源码)-day03：订单确认页面、美团支付页面、flex弹性盒子布局】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 实战项目源码[链接:https://pan.baidu.com/s/1r0Mje3Xnh8x4F1HyG4aQTA 提 ...
弹性盒子中百分比高度的计算规则
先说,当时感觉这个特别有意思,问了身边一圈人,大家都没有注意过,觉得这是一个挺有意思的知识点,是个很好的素材,然后从抖音和B站上私信了程序员小山与bug,当然,没有得到回复. 又问了一个同事,同事一番 ...
弹性盒子中的flex
flex属性是flex-grow,flex-shrink和flex-basis的缩写 flex是用在盒子中的子组件的,充分体现了弹性盒子的弹性二字. 例如现在的情况是: <div class=& ...

flex弹性盒子中flex-grow与flex的区别

flex弹性盒子中flex-grow与flex的区别

1、第一个是使用flex-grow进行空间的分配

总结：

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

最新文章

热门文章