​大家在使用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的区别的更多相关文章

  1. Flex的 Event中属性currentTarget与target的区别

    Flex的 Event中属性currentTarget与target的区别 1.区别 (1)currentTarget是事件的处理对象(event processor) (2)target是事件的调用 ...

  2. css3 flex弹性盒子布局梳理，打通任督二脉

    挺早就接触了css的flex布局,深入使用也就是在近期移动端开发.老来多健忘,只能自己梳理一下知识点,当做温故知新吧. ,请原谅小白的才疏学浅,写的不到位的地方请指正. flex属性用于设置或检索弹性 ...

  3. flex弹性盒子布局

    一.在需要使用弹性盒子的容器上添加属性:display:flex 或者 display:inline-flex; 二.在父容器上添加flex-direction设置子元素主轴方向: 不写默认值是X轴从 ...

  4. flex弹性盒子实现微博页面

    结果图: 源代码: html部分: <!DOCTYPE html><html lang="en"><head> <meta charset ...

  5. JS 与Flex交互:html中的js 与flex中的actionScript通信

    Flex与JavaScript交互的问题,这里和大家分享一下,主要包括Flex调用JavaScript中的函数和JavaScript调用Flex中的函数两大部分内容. Flex 与JavaScript ...

  6. flex弹性盒子的使用

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! CSS3引入了一种新的布局模型—— flex 布局.flex是 flexible box 的缩写,一般称之 ...

  7. JS Web的Flex弹性盒子模型

    1. justify-content <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  8. flex 弹性盒子模型一些案例.html

    Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flex元素是可以让你的布局根据浏览器的大小变化进行自动伸缩. 自适应导航 <ul class="navi ...

  9. flex弹性盒子

    注意事项 1.设为Flex布局之后,子元素的float,clear和vertical-align属性都讲失效 2.采用Flex布局的元素,称为Flex容器(Flex container),所有的子元素 ...

  10. Flex 弹性盒子布局使用教程

    本文转载于<https://blog.csdn.net/lyznice/article/details/53981062>

随机推荐

  1. redis 数据库在linux下的安装配置与使用

    linux安装redis 完整步骤(1)安装: 1.获取redis资源 wget http://download.redis.io/releases/redis-4.0.8.tar.gz 2.解压 t ...

  2. 如何查看win10的版本号。

    1.设置--系统--关于 2..dxdiag 3.CMD中输入:slmgr /dlv 4.Winver

  3. python 深拷贝及浅拷贝区别

    深拷贝及浅拷贝区别 浅拷贝copy: 可变类型:(列表,字典,集合)copy函数对可变类型的第一层对象进行拷贝,对拷贝的对象开辟新的内存空间进行存储,不会拷贝对象内部的子对象 不可变类型:(数字,字符 ...

  4. js小数相加精度不准确

    例: 0.1+0.1+0.1+0.7 != 1 0.1+0.2 != 0.3 解决办法: 相加 function addNum(num1, num2) {         let sq1, sq2; ...

  5. 20201003--统计数字字符个数（奥赛一本通 P98 1--字符类型和字符数组）

    输入一行字符,统计出其中数字字符的个数 输入:一行字符串,总长度不超过255 输出:一行,输出字符串里面数字字符的个数. 样例输入:Peking University is set up at 189 ...

  6. mybatis批量更新的几种方式和性能对比

    https://blog.csdn.net/csdnbeyoung/article/details/106258611

  7. C# core 流、字节、字符串相互转换

    /// <summary> /// 将 Stream 转成 byte[] /// </summary> public byte[] StreamToBytes(Stream s ...

  8. Git简介及使用

    1.Git简介 GIT= 版本控制 + 备份服务器 我们称用来存放上传档案的地方就做Repository.用中文来说,有点像是档案仓库的意思. 不过,通常我们还是使用Repository这个名词.当有 ...

  9. java实现AES/CBC/pack5padding加解密算法

    最近要测试一个借口,借口的传值参数是使用AES加密,偏移量为0000000000000000,秘钥:12345678901234567890123456789012,加密后内容转成16进制发送,用网上 ...

  10. 时序图，E-R图，数据流程图

    其中OSC是在线客服     数据流程图