在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. Rocket - tilelink - Metadata

    https://mp.weixin.qq.com/s/Dyb1XipJtdhGa9mktXXjCg   简单介绍Metadata的实现.   ​​   1. 基本介绍   Metadata是一个Bun ...

  2. Java实现 LeetCode 700 二叉搜索树中的搜索（遍历树）

    700. 二叉搜索树中的搜索 给定二叉搜索树(BST)的根节点和一个值. 你需要在BST中找到节点值等于给定值的节点. 返回以该节点为根的子树. 如果节点不存在,则返回 NULL. 例如, 给定二叉搜 ...

  3. Java实现 LeetCode 52 N皇后 II

    52. N皇后 II n 皇后问题研究的是如何将 n 个皇后放置在 n×n 的棋盘上,并且使皇后彼此之间不能相互攻击. 上图为 8 皇后问题的一种解法. 给定一个整数 n,返回 n 皇后不同的解决方案 ...

  4. Java实现 洛谷 P1170 兔八哥与猎人

    import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import ...

  5. Java实现第八届蓝桥杯兴趣小组

    兴趣小组 为丰富同学们的业余文化生活,某高校学生会创办了3个兴趣小组 (以下称A组,B组,C组). 每个小组的学生名单分别在[A.txt],[B.txt]和[C.txt]中. 每个文件中存储的是学生的 ...

  6. Spring MVC详细讲解

    一:三层架构和MVC 1:三层架构 我们的开发架构一般都是基于两种形式:一种是 C/S 架构,也就是客户端/服务器,另一种是 B/S 架构,也就是浏览器服务器.在 JavaEE 开发中,几乎全都是基于 ...

  7. 彻底搞懂 etcd 系列文章（二）：etcd 的多种安装姿势

    0 专辑概述 etcd 是云原生架构中重要的基础组件,由 CNCF 孵化托管.etcd 在微服务和 Kubernates 集群中不仅可以作为服务注册与发现,还可以作为 key-value 存储的中间件 ...

  8. UBoot配置编译及Makefile分析

    一. UBoot配置编译初步分析 1. UBoot源码结构 (1)UBoot工程项目中的文件可以分为3类 ① 第1类目录:与处理器体系结构或开发板硬件直接相关 ② 第2类目录:一些通用的函数或驱动程序 ...

  9. 如何优雅地停止 Spring Boot 应用？

    首先来介绍下什么是优雅地停止,简而言之,就是对应用进程发送停止指令之后,能保证正在执行的业务操作不受影响,可以继续完成已有请求的处理,但是停止接受新请求. 在 Spring Boot 2.3 中增加了 ...

  10. 实战记录之SQL server报错手工注入

    前言 最近测试了一个站点,这个站点挺有意思,发现没有关闭错误提示,初步猜测是SQL server数据库,后来验证确实是.在这里记录一下实战过程,并详细讲解一下用到的知识点. SQL server报错注 ...