微信扫一扫 分享朋友圈

已有 731 人浏览分享

开启左侧

flex属性:flex:1介绍

[复制链接]
731 0
实现页面中的footer保持在页面底部功能,有一个非常简单的方法:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html, body{
            height: 100%;
        }
        #container{
            display: flex;
            flex-direction: column;
            min-height: 100%;
        }
        #header{
            height: 100px;
            background-color: aquamarine;
        }
        #content{
            flex: 1;
            background-color: burlywood;
        }
        #footer{
            height: 120px;
            background-color: brown;
        }
        .box{
            height: 300px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="header"></div>
        <div id="content">
            <div class="box"></div>
        </div>
        <div id="footer"></div>
    </div>
</body>
</html>

将父容器的display设置为flex,flex-direaction设置为column,min-height设置为100%;再将需要伸缩的content部分设置flex:1。这样,可以实现footer一直固定在页面底部,当content内容足够多的时候,footer才会移动出屏幕。

flex:1到底是什么
flex实际上是flex-grow、flex-shrink和flex-basis三个属性的缩写。
flex:1 ==> flex:1 1 auto
flex-grow
flex-grow属性指定了flex容器中剩余空间的多少应该被分配给项目。flex-grow设置的值为扩张因子,默认为0,剩余空间将会按照这个权重分别分配给子元素项目。
例如:父元素的宽度为500px,其中有两个元素A和B,A的宽度为100px,B的宽度为150px。假如不设置flex-grow属性,那么父元素的剩余宽度为500-(100+150)=250px。
<div id="container">
        <div id="A">100px</div>
        <div id="B">150px</div>
</div>
                #container {
            display: flex;
            width: 500px;
            margin: 20px;
            border: 1px solid#000;
        }

        #A {
            width: 100px;
            height: 200px;
            background-color: aqua;
        }

        #B {
            width: 150px;
            height: 200px;
            background-color: chocolate;
        }

image.png
假如A、B元素分别设置flex-grow的权重为a、b,那么A、B元素分别得到的剩余空间为250 * a/(a+b)、250 * b/(a+b)。
例:设置A的flex-grow为2,B的flex-grow为3,那么A元素的总宽度为100+250 * 2/(2+3)=200px,B元素的总宽度为150+250 * 3/(2+3)=300px。
                #container {
            display: flex;
            width: 500px;
            margin: 20px;
            border: 1px solid#000;
        }

        #A {
            width: 100px;
            height: 200px;
            background-color: aqua;
            flex-grow: 2;
        }

        #B {
            width: 150px;
            height: 200px;
            background-color: chocolate;
            flex-grow: 3;
        }

image.png
image.png
假如只有一个元素设置了flex-grow属性,那么该元素会得到所有剩余空间。

                #container {
            display: flex;
            width: 500px;
            margin: 20px;
            border: 1px solid#000;
        }

        #A {
            width: 100px;
            height: 200px;
            background-color: aqua;
            flex-grow: 2;
        }

        #B {
            width: 150px;
            height: 200px;
            background-color: chocolate;
        }

image.png
假如所有元素的flex-grow属性值加起来小于1,那么权重计算的分母将会按照1来计算。
例如:设置A的flex-grow为0.2,B的flex-grow为0.3,那么A的总宽度为100+(250 * 0.2)/1=150px,B的总宽度为100+(250 * 0.3)/1=225px。父元素剩余宽度为250 * (1-0.2-0.3)=125px。即父元素的剩余空间不会全部分配给子元素。

                #container {
            display: flex;
            width: 500px;
            margin: 20px;
            border: 1px solid#000;
        }

        #A {
            width: 100px;
            height: 200px;
            background-color: aqua;
            flex-grow: 0.2;
        }

        #B {
            width: 150px;
            height: 200px;
            background-color: chocolate;
            flex-grow: 0.3;
        }

image.png
image.png
flex-shrink
flex-shrink属性指定了flex元素的收缩规则。flex元素仅在默认宽度之和大于容器的时候才会发生收缩。默认属性值为1,所以在空间不够的时候,子项目将会自动缩小。
假如父元素的宽度为500px,子元素A、B的宽度分别为250px,350px,超出容器宽度为(350+250)-500=100px。flex-shrink的计算公式为:超出宽度 * (当前元素宽度 * 其flex-shrink属性值/(每个元素的flex-shrink值 * 其宽度))。
在下面例子中,由于默认flex-shrink为1,那么A的缩小宽度为100 * (250 * 1/(250 * 1+350 * 1)≈41.66px,B的缩小宽度为100 * (350 * 1/(250 * 1+350 * 1)≈58.33px。A的最终宽度为250-41.66=208.34px,B的最终宽度为350-58.33=291.66px。
<div id="container">
        <div id="A">250px</div>
        <div id="B">350px</div>
    </div>
                #container {
            display: flex;
            width: 500px;
            margin: 20px;
            border: 1px solid#000;
        }

        #A {
            width: 250px;
            height: 200px;
            background-color: aqua;
        }

        #B {
            width: 350px;
            height: 200px;
            background-color: chocolate;
        }

image.png
image.png
假如都设置flex-shrink为0,那么元素将不会缩小,宽度会超出父元素的宽度。
image.png
和flex-grow一样,当各元素的flex-shrink之和不足1时,将不会收缩所有空间,而只收缩剩余空间中(flex-shrink总和/1)的比例的空间。
例:设A的flex-shrink为0.2,B的flex-shrink为0.3:

                #container {
            display: flex;
            width: 500px;
            margin: 20px;
            border: 1px solid#000;
        }
        #A {
            width: 250px;
            height: 200px;
            background-color: aqua;
            flex-shrink: 0.2;
        }

        #B {
            width: 350px;
            height: 200px;
            background-color: chocolate;
            flex-shrink: 0.3;
        }
此时,溢出的宽度为100px,但是能收缩的宽度只有100 * (0.2+0.3)=50px。A的缩小宽度为50 * (250*0.2/(250 * 0.2+350 * 0.3)≈16.12px,B的缩小宽度为50 * (350 * 0.3/(250 * 0.2+350 * 0.3)≈33.87px。

image.png
image.png
flex-basis
flex-basis属性指定了flex元素在主轴方向上的初始大小。如果不使用box-sizing改变盒模型的话,那么这个属性就决定了flex元素的内容的尺寸。如果设置了flex-basis值,那么元素占用的空间为flex-basis值;如果没有设置或者设置为auto,那么元素占据的空间为元素的width/height值。
例:A元素设置了width为250px,同时设置了flex-basis为300px,那么A元素占据的空间为300px。B元素没有设置flex-basis,占据的空间为350px。
<div id="container">
        <div id="A">250px</div>
        <div id="B">350px</div>
    </div>
                #container {
            display: flex;
            width: 700px;
            margin: 20px;
            border: 1px solid#000;
        }
        #A {
            width: 250px;
            height: 200px;
            background-color: aqua;
            flex-basis: 300px;
        }

        #B {
            width: 350px;
            height: 200px;
            background-color: chocolate;
            flex-shrink: 0.3;
        }

image.png

免责声明:
1,海欣资源网所发布的资源由网友上传和分享,不保证信息的正确性和完整性,且不对因信息的不正确或遗漏导致的任何损失或损害承担责任。
2,海欣资源网的资源来源于网友分享,仅限用于学习交流和测试研究目的,不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。
3,海欣资源网所发布的资源由网友上传和分享,版权争议与本站无关,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。
4,如果您喜欢,请支持正版,购买正版,得到更好的正版服务,如有侵权,请联系我们删除并予以真诚的道歉,联系方式邮箱 haixinst@qq.com
海欣资源-企业信息化分享平台。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

0

关注

0

粉丝

56

主题
热度排行
回复排行
最新贴子

Archiver|手机版|海欣资源 ( 湘ICP备2021008090号-1 )|网站地图

GMT+8, 2024-6-19 00:22 , Gzip On, MemCached On.

免责声明:本站所发布的资源和文章均来自网络,仅限用于学习交流和测试研究目的,不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。 本站信息来自网络,版权争议与本站无关,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 如果您喜欢,请支持正版,购买正版,得到更好的正版服务,如有侵权,请联系我们删除并予以真诚的道歉。