在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. HDL-数字电路建模的要点

    https://mp.weixin.qq.com/s/tEDMWf1gk0e7u4hIWKM9bQ   ​​   一. 拓扑   数字电路的拓扑抽象出来之后比较简单,就是线(Wire)和开关(Swit ...

  2. Java实现 LeetCode 671 二叉树中第二小的节点（遍历树）

    671. 二叉树中第二小的节点 给定一个非空特殊的二叉树,每个节点都是正数,并且每个节点的子节点数量只能为 2 或 0.如果一个节点有两个子节点的话,那么这个节点的值不大于它的子节点的值. 给出这样的 ...

  3. Java实现蓝桥杯VIP 算法训练 P0502

    试题 算法训练 P0502 资源限制 时间限制:1.0s 内存限制:256.0MB 编写一个程序,读入一组整数,这组整数是按照从小到大的顺序排列的,它们的个数N也是由用户输入的,最多不会超过20.然后 ...

  4. Java实现 蓝桥杯VIP 算法提高 班级排名

    算法提高 班级排名 时间限制:1.0s 内存限制:256.0MB 问题描述 达达在陶陶的影响下,也对学习慢慢的产生了兴趣. 他在每次考试之后,都会追着老师问,自己在班级的总名次是多少.考试一多,老师也 ...

  5. Java实现洛谷 P2802 回家

    P2802 回家 时间限制 1.00s 内存限制 125.00MB 题目描述 小H在一个划分成了n*m个方格的长方形封锁线上. 每次他能向上下左右四个方向移动一格(当然小H不可以静止不动), 但不能离 ...

  6. Java实现 洛谷 P1909 买铅笔

    import java.util.Arrays; import java.util.Scanner; public class Main { public static void main(Strin ...

  7. java实现第四届蓝桥杯快速排序

    快速排序 题目描述 快速排序算法是典型的分治思想的运用.它使用某个key把全部元素分成两组,其中一组的元素不大于另一组.然后对这两组再次进行递归排序. 以下代码实现了快速排序.请仔细阅读代码,填写缺少 ...

  8. 点击 button 自动刷新页面

    问题:为什么点击 button 会刷新页面 ? 原因:你代码的写法可能如下图,把 <button> 按钮 写在 <form> </form> 标签里边啦. < ...

  9. lambda表达式操作DataTable

    using System;using System.Collections.Generic;using System.Data;using System.Linq;using System.Text; ...

  10. opencl(2)平台、设备、上下文的获取与信息获取

    1:平台 1)获取平台id cl_int clGetPlatformIDs( cl_uint num_entries,      //想要获取的平台数 cl_platform_id * flatfor ...