在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. 【算法】单元最短路径之Bellman-Ford算法和SPFA算法

    SPFA是经过对列优化的bellman-Ford算法,因此,在学习SPFA算法之前,先学习下bellman-Ford算法. bellman-Ford算法是一种通过松弛操作计算最短路的算法. 适用条件 ...

  2. Rocket - debug - DebugCustomXbar再讨论

    https://mp.weixin.qq.com/s/YPFa6kE6I_Ud_MJGvzmS-g 简单讨论输入边/输出边Bundle的方向. 1. 上游节点的地址不重复 仔细看了一下sourceFn ...

  3. Chisel3-Intellij IDEA安装Scala插件

    https://mp.weixin.qq.com/s/xTk5ucvSNuwsh8C6E362cg   后续开启RISC-V开发相关内容.   RISC-V开发推荐使用Chisel编程语言.Chise ...

  4. SpringBoot 及其 基本原理、配置文件(二）

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 一.SpringBoot 的版本与启动过程 1.SpringBoot都是jar工程 ​ 2.Spring ...

  5. 【Redis面试题】如何使用Redis实现微信步数排行榜？

    1. 前言 之前写过一篇博客,讲解的是Redis的5种数据结构及其常用命令,当时有读者评论,说希望了解下这5种数据结构各自的使用场景,不过一直也没来得及写. 碰巧,在3月份找工作面试时,有个面试官先问 ...

  6. ASP.NET中使用Entity Framework开发登陆注册Demo

    这里更多的是当作随身笔记使用,记录一下学到的知识,以便淡忘的时候能快速回顾 当前步骤是该项目的第一部分 第一部分(当前) 第二部分 大完结版本 直接上步骤,有类似的开发登陆注册也可以参考. 登陆注册的 ...

  7. Java实现 LeetCode 312 戳气球

    312. 戳气球 有 n 个气球,编号为0 到 n-1,每个气球上都标有一个数字,这些数字存在数组 nums 中. 现在要求你戳破所有的气球.每当你戳破一个气球 i 时,你可以获得 nums[left ...

  8. Java实现蓝桥杯VIP算法训练 预测身高

    试题 算法训练 预测身高 资源限制 时间限制:1.0s 内存限制:256.0MB 问题描述: 生理卫生老师在课堂上娓娓道来: 你能看见你未来的样子吗?显然不能.但你能预测自己成年后的身高,有公式: 男 ...

  9. Java实现 LeetCode 213 打家劫舍 II（二）

    213. 打家劫舍 II 你是一个专业的小偷,计划偷窃沿街的房屋,每间房内都藏有一定的现金.这个地方所有的房屋都围成一圈,这意味着第一个房屋和最后一个房屋是紧挨着的.同时,相邻的房屋装有相互连通的防盗 ...

  10. java实现哈密顿回路问题

    1 问题描述 什么是哈密顿回路? 引用自百度百科: 哈密顿图(哈密尔顿图)(英语:Hamiltonian path,或Traceable path)是一个无向图,由天文学家哈密顿提出,由指定的起点前往 ...