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

先来看下两个属性的不同之处吧~

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

使用flex进行放大

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        article {

            width: 600px;

            height: 200px;

            margin: 50px auto;

            display: flex;

            border: 1px dashed black;

        }

        div {

            width: 100px;

            height: 100px;

        }

        div:nth-child(1) {

            flex: 1;

            background-color: darkorange;

        }

        div:nth-child(2) {

            flex: 2;

            background-color: skyblue;

        }

        div:nth-child(3) {

            background-color: thistle;

        }

    </style>

</head>

<body>

    <article>

        <div>1</div>

        <div>2</div>

        <div>3</div>

    </article>

</body>

</html>

页面效果

使用flex放大子元素：
step1：计算剩余空间，剩余空间为弹性盒子剩余的宽度与进行flex的子元素的宽度之和。
例中的剩余宽度为300px ，进行flex的子元素宽度分别是100,100，所以剩余空间为500px。
step2: 按照进行flex属性值、数字的比例进行分配空间。第一个div和第二个div的比例为1:2。因此其宽度分别为166.66px,333.34px。

使用flex-grow进行放大

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        article {

            width: 600px;

            height: 200px;

            margin: 50px auto;

            display: flex;

            border: 1px dashed black；

        }

        div {

            width: 100px;

            height: 100px;

        }

        div:nth-child(1) {

            flex-grow: 1;

            background-color: darkorange;

        }

        div:nth-child(2) {

            flex-grow: 2;

            background-color: skyblue;

        }

        div:nth-child(3) {

            background-color: thistle;

        }

    </style>

</head>

<body>

    <article>

        <div>flex-grow: 1;

            <p>199.34px</p>

        </div>

        <div>flex-grow: 2;

            <p>298.66px</p>

        </div>

        <div>3

            <p>100px</p>

        </div>

    </article>

</body>

</html>

页面效果

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

弹性盒模型中flex-grow 和flex的区别的更多相关文章

  1. 弹性盒模型 flex box

    弹性盒子模型 布局方案 传统的布局方案大多采用div+css+float+position+display来实现,但是随着css3中弹性盒子模型的推出,在前端布局方案中就又多出了一项彪悍的选项. 而因 ...

  2. 87.CSS Flex 弹性盒模型布局教程（共用的css在48篇文章gird）

    CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...

  3. columns分栏与flex弹性盒模型

    columns  分栏 值:column-width:设置每列的宽度        column-count:设置列数   例:columns{200px 3}   列数和宽度固定        co ...

  4. css3之弹性盒模型初探（一）

    什么是弹性盒模型? 弹性盒模型是指在父级改变大小的时候内部的自己元素也会相应的改变大小,即子集会按照父级的大小按比例自适应大小. 弹性盒模型的提出可以解决一些响应式布局的需求   如何使用弹性盒模型? ...

  5. CSS弹性盒模型flex在布局中的应用

    × 目录 [1]元素居中 [2]两端对齐 [3]底端对齐[4]输入框按钮[5]等分布局[6]自适应布局[7]悬挂布局[8]全屏布局 前面的话 前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法, ...

  6. 详细介绍弹性盒模型（display：flex）

    弹性盒模型,即Flexbox,是css3中的新特性,其实弹性盒模型的原身是dispaly:box:这里,我们暂时不考虑旧的,我们只看新的. 为容器指定弹性盒子,只需在父元素(也就是容器)中设置:dis ...

  7. 深入理解CSS弹性盒模型flex

    × 目录 [1]版本更迭 [2]display [3]基本概念[4]伸缩容器[5]伸缩项目 前面的话 CSS3引入了一种新的布局模型——flex布局.flex是flexible box的缩写,一般称之 ...

  8. CSS3弹性盒模型，Flex布局教程

    布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. CSS3中引入flex的弹性盒模型 ...

  9. display:box；display:flex；弹性盒模型

    display:box:display:flex:弹性盒模型 非常适用于移动端.PC端高级浏览器,效果也很好. display: -webkit-box; display: -moz-box; dis ...

随机推荐

  1. “造轮运动”之 ORM框架系列（一）~谈谈我在实际业务中的增删改查

    想想毕业已经快一年了,也就是大约两年以前,怀着满腔的热血正式跨入程序员的世界,那时候的自己想象着所热爱的技术生涯会是多么的丰富多彩,每天可以与大佬们坐在一起讨论解决各种牛逼的技术问题,喝着咖啡,翘着二 ...

  2. Redis 入门到分布式 （一）Redis初识

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 一.Redis特性目录 Redis的特性: 速度快 持久化 多种数据结构 支持多种编辑语言 功能丰富 简 ...

  3. 使用turtle库绘制同心圆

    import turtle as t t.pensize(3) t.setup(600,600,50,50) t.pencolor("yellow") t.penup() t.pe ...

  4. vue 中<vue-scroll >滚动条回到顶部

    今天项目碰到一个<vue-scroll >滚动条要回到顶部的需求,查询了好久终于解决了,这里记录一下: 其实就是scrollIntoView()方法的使用(官方文档): 需要注意的是要求页 ...

  5. Java实现蓝桥杯算法提高P0102

    算法提高 P0102 时间限制:1.0s 内存限制:256.0MB 提交此题 用户输入三个字符,每个字符取值范围是0-9,A-F.然后程序会把这三个字符转化为相应的十六进制整数,并分别以十六进制,十进 ...

  6. JavaWeb+SVN+Maven+Tomcat +jenkins搭建持续集成环境和自动部署

    https://blog.csdn.net/wh52788/article/details/80900477 https://blog.csdn.net/liyong1028826685/articl ...

  7. python自学Day05（自学书籍python编程从入门到实践）

    第6章 字典 6.1 一个简单的字典 先跟随书本创建一个简单的字典感受一下. alien_0 = {'color':'green','points':5} print(alien_0['color'] ...

  8. install-package : 由于无法加载项目 mydemo 的详细信息，操作失败

    安装nuget package包提示错误 install-package : 由于无法加载项目 mydemo 的详细信息,操作失败 解决方法 项目用dotnet cli 命令dotnet new mv ...

  9. iOS－字典转模型（单模型）的实现

    用模型取代字典的好处 使用字典的坏处 一般情况下,设置数据和取出数据都使用“字符串类型的key”,编写这些key时,编译器不会有任何友善提示,需要手敲, eg:dict[@"name&quo ...

  10. 解析D-Bus服务器的地址

    D-Bus 1.13.14 Main Page Related Pages Modules Data Structures Files Typedefs | Functions Address par ...