成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

FlexBox彈性盒子計(jì)算規(guī)則

Kylin_Mountain / 968人閱讀

摘要：申明的值為，不出現(xiàn)伸展的情況申明的值不為，且子盒子的或值之和容器的的左邊界到右邊界的值。分配規(guī)則是按子盒子屬性值所占百分比來分配見上首先依據(jù)屬性計(jì)算各個(gè)彈性盒子的寬度值，，一共溢出了。

和FlexBox彈性盒子計(jì)算規(guī)則相關(guān)的屬性有：

margin

flex-basis

flex-grow

flex-shrink

margin

Flex容器每一行的寬度 = 每個(gè)子容器的寬度 + 子容器margin-left和margin-right的值

    
    html:
    
    

        

        

        

    

    
    css:
    
    .container {
            display: flex;
            width: 400px;
        }
        .item {
            height: 40px;
        }
        .first {
            flex: 1 0 0;
            background-color: red;
        }
        .second {
            flex: 2 0 0;
            background-color: blue;
            margin: 0 50px;
        }
        .third {
            flex: 3 0 0;
            background-color: yellow;
        }

總width(400px) = 總margin(100px) + 每個(gè)item的寬度;

由于flex-basis屬性值為0，剩余空間為400px，則各個(gè)子盒子會(huì)根據(jù)自身的flex-grow屬性值及所占總比重來分配剩余空間
.first寬度: 400*(1/(1+2+3))
.second寬度: 400*(2/(1+2+3))
.third寬度: 400*(3/(1+2+3))

flex-basis

子盒子的基準(zhǔn)值

可以代替申明width屬性

同時(shí)聲明width屬性和flex-basis屬性時(shí)，會(huì)以flex-basis的值來計(jì)算

當(dāng)flex-basis屬性值為0，在width有申明的情況下以width來計(jì)，width沒有的申明的話，則按其內(nèi)容來計(jì)。

flex-grow

flex-grow申明的值為0，不出現(xiàn)伸展的情況

flex-grow申明的值不為0，且子盒子的flex-basis(或width)值之和 < 容器的padding的左邊界到右邊界的值。那么子盒子會(huì)根據(jù)申明的flex-grow值去分配剩余的空間。

分配規(guī)則是按子盒子flex-grow屬性值所占百分比來分配: demo見上

flex-shrink 

    

    

    




.container {
    display: flex;
    width: 200px;
    height: 400px;
    border: 1px solid #c3c3c3;
}
.first {
    flex-basis: 40px;
    flex-shrink: 1;
}        
.third {
    flex-basis: 40px;
    flex-shrink: 2;
}
.second {
    flex-shrink: 3;
    width: 200px;
}

首先依據(jù)flex-basis屬性計(jì)算各個(gè)彈性盒子的寬度值，(200+40+40)px，一共溢出了80px。
然后依據(jù)各個(gè)彈性盒子的flex-shrink屬性值，算出其加權(quán)后的綜合值：
1*40 + 2*40 + 3*200 = 720(px);
.first需要縮小的值：(40*1/720)*80 約等于4px
.second需要縮小的值：(40*2/720)*80 約等于9px
.third需要縮小的值：(200*3/720)*80 約等于67px
第一個(gè)盒子的寬度40-4 = 36px
第二個(gè)盒子的寬度40-9 = 31px
第三個(gè)盒子的寬度200-67 = 133px

如果flex-basis的屬性未設(shè)置，即flex-basis: 0,那么彈性盒子計(jì)算多余空間或者溢出空間的寬度是依據(jù)其width的值，如果width未設(shè)置，那么是其內(nèi)容的寬度

如果同時(shí)設(shè)置了flex-basis的屬性值和width的值，那么將會(huì)忽略width的值

flex-basis可設(shè)為百分比，是相對(duì)于祖先申明為display:flex的元素而言

幾個(gè)常見的flex取值：

flex: 1; -->> flex: 1 1 0%;

flex: none; -->> flex: 0 0 auto;

flex: auto; -->> flex: 1 1 auto;

flex: 0 auto;或者 flex: initial -->> flex: 0 1 auto; 即為flex的初始值

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115200.html

相關(guān)文章

  • FlexBox 布局詳解

    摘要：很久沒有寫博客了，這里把之前學(xué)習(xí)布局的一篇筆記整理了一下。其在文檔流中的直接子元素將成為。子元素在容器內(nèi)排列的方向稱為主軸，跟主軸垂直的方向稱為輔軸。 很久沒有寫博客了，這里把之前學(xué)習(xí) flex 布局的一篇筆記整理了一下。發(fā)布到博客上。趕一個(gè)五月的末班車吧。還是得堅(jiān)持啊!! flex 彈性布局FlexBox 可控制子元素: 水平或垂直排成一行 控制子元素的對(duì)齊方式 控制子元素的高度／...

    incredible 評(píng)論0 收藏0

  • FlexBox 布局詳解

    摘要：很久沒有寫博客了，這里把之前學(xué)習(xí)布局的一篇筆記整理了一下。其在文檔流中的直接子元素將成為。子元素在容器內(nèi)排列的方向稱為主軸，跟主軸垂直的方向稱為輔軸。 很久沒有寫博客了，這里把之前學(xué)習(xí) flex 布局的一篇筆記整理了一下。發(fā)布到博客上。趕一個(gè)五月的末班車吧。還是得堅(jiān)持啊!! flex 彈性布局FlexBox 可控制子元素: 水平或垂直排成一行 控制子元素的對(duì)齊方式 控制子元素的高度／...

    you_De 評(píng)論0 收藏0

  • CSS中各種布局的背后(*FC)

    摘要：中各種布局的背后，實(shí)質(zhì)上是各種的組合。相反，一些塊容器盒，比如非替換行內(nèi)塊及非替換表格單元格，不是塊級(jí)盒。描述元素跟它的后代之間的影響。行盒行盒由行內(nèi)格式化上下文產(chǎn)生的盒，用于表示一行。彈性容器外和彈性項(xiàng)目內(nèi)的一切元素都不受影響。 CSS中各種布局的背后，實(shí)質(zhì)上是各種*FC的組合。CSS2.1 中只有 BFC 和 IFC, CSS3 中還增加了 FFC 和 GFC。 盒模型(Box M...

    miracledan 評(píng)論0 收藏0

  • FlexBox學(xué)習(xí) 彈性布局_019

    摘要：學(xué)習(xí)彈性布局模型，通常被稱為，是一種一維的布局模型。任何空間分布都將在該行上發(fā)生，而不影響該空間分布的其他行。同時(shí)，布局空白對(duì)于元素的對(duì)齊行為也是很重要的。這會(huì)使該元素延展，并占據(jù)此方向軸上的布局空白。 FlexBox學(xué)習(xí) 彈性布局 Flexible Box 模型，通常被稱為 flexbox，是一種一維的布局模型。它給 flexbox 的子元素之間提供了強(qiáng)大的空間分布和對(duì)齊能力。 一維...

    warnerwu 評(píng)論0 收藏0

  • FlexBox學(xué)習(xí) 彈性布局_019

    摘要：學(xué)習(xí)彈性布局模型，通常被稱為，是一種一維的布局模型。任何空間分布都將在該行上發(fā)生，而不影響該空間分布的其他行。同時(shí)，布局空白對(duì)于元素的對(duì)齊行為也是很重要的。這會(huì)使該元素延展，并占據(jù)此方向軸上的布局空白。 FlexBox學(xué)習(xí) 彈性布局 Flexible Box 模型，通常被稱為 flexbox，是一種一維的布局模型。它給 flexbox 的子元素之間提供了強(qiáng)大的空間分布和對(duì)齊能力。 一維...

    MyFaith 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<