弹性盒模型中flex-grow 和flex的区别

栏目: IT技术 · 发布时间: 4年前

内容简介:在flex弹性盒模型体系中,flex-grow和flex都有对子元素进行放大的作用,但是这两个属性在放大时的计算方法不同,在使用时候要注意,使用正确的放大属性,从而达到自己想要的效果。先来看下两个属性的不同之处吧~这是一个宽600px的弹性盒子,其中每个子元素的宽度都为100px。我们分别使用flex和flex-grow对子元素进行放大。

在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-grow 和flex的区别 弹性盒模型中flex-grow 和flex的区别

使用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 和flex的区别

弹性盒模型中flex-grow 和flex的区别

使用flex-grow放大子元素

step1:计算剩余空间,剩余空间为弹性盒子的剩余宽度。

例中的剩余宽度为300px

step2: 按照进行flex属性值,数字的比例进行分配空间。第一个div和第二个div的比例为1:2。因此其宽度分别为100px ,200px。

step3:元素自身的宽度加上分配到的剩余空间就是放大后的宽度。因此其最终显示出来宽度分别为200px ,300px。


以上所述就是小编给大家介绍的《弹性盒模型中flex-grow 和flex的区别》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

创投42章经

创投42章经

曲凯 / 中信出版集团 / 2018-10-20 / 58.00

《创投42章经》是拥有百万粉丝的微信公众号“42章经”的精选文章合集,全书共分为心法、内功、招式和江湖传奇四部分。 在心法部分,读者可以学到一些创业与投资的底层思维方式;在内功部分,读者可以了解到,投资人看待一家公司经营状况的标准;在招式部分,读者可以看到作者作为一名资深投资人和睿智的观察者,对过去几年主要的公司、模式以及风口的判断;最后的江湖传奇部分,作者通过一些故事,帮助读者更好地理解当......一起来看看 《创投42章经》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

随机密码生成器
随机密码生成器

多种字符组合密码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具