在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. 高性能可扩展mysql 笔记（三）Hash分区、RANGE分区、LIST分区

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 一.MySQL分区表操作 1.定义:数据库表分区是数据库基本设计规范之一,分区表在物理上表现为多个文件, ...

  2. Java实现 蓝桥杯 算法提高 矩阵相乘

    算法提高 矩阵相乘 时间限制:1.0s 内存限制:256.0MB 问题描述 小明最近在为线性代数而头疼,线性代数确实很抽象(也很无聊),可惜他的老师正在讲这矩阵乘法这一段内容. 当然,小明上课打瞌睡也 ...

  3. Java实现 蓝桥杯 算法提高 求arccos值

    算法提高 7-2求arccos值 时间限制:10.0s 内存限制:256.0MB 提交此题 问题描述 利用标准库中的cos(x)和fabs(x)函数实现arccos(x)函数,x取值范围是[-1, 1 ...

  4. Java实现 蓝桥杯VIP 算法训练 求指数

    问题描述 已知n和m,打印n1,n2,-,nm.要求用静态变量实现.nm表示n的m次方.已知n和m,打印n1,n2,-,nm.要求用静态变量实现.nm表示n的m次方.(每行显示5个数,每个数宽为12, ...

  5. Java实现 LeetCode 127 单词接龙

    127. 单词接龙 给定两个单词(beginWord 和 endWord)和一个字典,找到从 beginWord 到 endWord 的最短转换序列的长度.转换需遵循如下规则: 每次转换只能改变一个字 ...

  6. java实现圆周率与级数

    ** 圆周率与级数** 圆周率 我国古代数学家对圆周率方面的研究工作,成绩是突出的.三国时期的刘徽.南北朝时期的祖冲之都在这个领域取得过辉煌战绩. 有了计算机,圆周率的计算变得十分容易了.如今,人们创 ...

  7. Java实现第八届蓝桥杯购物单

    购物单 题目描述 小明刚刚找到工作,老板人很好,只是老板夫人很爱购物.老板忙的时候经常让小明帮忙到商场代为购物.小明很厌烦,但又不好推辞. 这不,XX大促销又来了!老板夫人开出了长长的购物单,都是有打 ...

  8. Linux权限管理命令chown、chgrp、umask详解

    命令chown详解 命令chown,所在路径为: 可以看到,这个命令的路径为:/usr/bin/chown ,所以它的执行权限是所有用户 命令的基本功能是改变文件或目录的所有者(只有root可以进行, ...

  9. mysql基础-数据库表的管理-记录(四)

    0x01 MySQL中字符大小写 1.SQL关键字及函数不区分大小写 2.数据库.表及视图名称的大小写区分与否取决于底层OS及FS 3.存储过程.存储函数及事件调度器的名字不区分大小写,但触发器区分大 ...

  10. 如何在Vim中的查找替换

    “%s/最/第二/g” 用vim的人都知道,这是把所有“最”替换成“第二”的意思.其实vim的查找替换功能非常强大,用的好可以极大提升效率. vim的查找替换命令如下所示:    :{作用范围}s/{ ...