国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

Kylin_Mountain / 960人閱讀

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

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

margin

flex-basis

flex-grow

flex-shrink

margin

Flex容器每一行的寬度 = 每個子容器的寬度 + 子容器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) + 每個item的寬度;

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

flex-basis

子盒子的基準值

可以代替申明width屬性

同時聲明width屬性和flex-basis屬性時，會以flex-basis的值來計算

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

flex-grow

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

flex-grow申明的值不為0，且子盒子的flex-basis(或width)值之和 < 容器的padding的左邊界到右邊界的值。那么子盒子會根據(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屬性計算各個彈性盒子的寬度值，(200+40+40)px，一共溢出了80px。
然后依據(jù)各個彈性盒子的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
第一個盒子的寬度40-4 = 36px
第二個盒子的寬度40-9 = 31px
第三個盒子的寬度200-67 = 133px

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

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

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

幾個常見的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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/115200.html

相關(guān)文章

  • FlexBox 布局詳解

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

    incredible 評論0 收藏0

  • FlexBox 布局詳解

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

    you_De 評論0 收藏0

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

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

    miracledan 評論0 收藏0

  • FlexBox學習 彈性布局_019

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

    warnerwu 評論0 收藏0

  • FlexBox學習 彈性布局_019

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

    MyFaith 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<