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

資訊專欄INFORMATION COLUMN

flex-item屬性之flex-grow、flex-shrink了解下

Simon_Zhou / 1062人閱讀

摘要：容器仍然是，灰灰，小橘，需要一起減掉才可以。但是灰灰和小橘的瘦身能力明顯不一樣，他們?cè)O(shè)置了不同的，分別為和。瘦掉的這需要平分到灰灰加上小橘身上的每一個(gè)上。

前言

flex布局，想必css江湖上的各位俠士都用得很多了，那我們今天就來(lái)說(shuō)說(shuō)flex-item下的幾個(gè)不太常用的屬性吧（其實(shí)是鄙人用的不多（┬＿┬）而已啦，好奇了解了下）。

從容貌上來(lái)看，grow，shrink，grow，shrink，哎呦，這不就是我一年下來(lái)減肥長(zhǎng)胖減肥長(zhǎng)胖的節(jié)奏么？╭∩╮（￣▽￣）╭∩╮
從字面上的意思來(lái)看，就是對(duì)flex-item進(jìn)行身材的改變，很符合flex自適應(yīng)的概念嘛。那這兩個(gè)屬性到底是有來(lái)嘛意思，有什么用呢？下面就來(lái)了解下嘍。

參照物

flex-grow、flex-shrink、flex-basis三姐妹可以被flex屬性直接囊括了，flex：flex-grow flex-shrink flex-basis, eg, flex: 0 1 auto;說(shuō)好的只了解這兩個(gè)屬性的，為什么又來(lái)了個(gè)flex-basis?因?yàn)槿松聿淖兣肿兪菔且袑?duì)照物的嘛，需要和原裝元素進(jìn)行對(duì)比才可以。

flex-basis指item的content寬度，和屬性width有著相同的作用，不過(guò)兩者有著不同的優(yōu)先級(jí)。

如果flex-basis和width同時(shí)設(shè)置了數(shù)值，則以flex-basis為準(zhǔn)；

如果flex-basis設(shè)置為auto且width設(shè)置了確切的寬度值，以width設(shè)置的寬度值為準(zhǔn)；

如果flex-basis設(shè)置為auto且width沒有設(shè)置，則flex-basis以實(shí)際內(nèi)容的寬度值為準(zhǔn);

一起變成張惠妹

好了，那我們已經(jīng)有了基本的對(duì)照參考值，即容器內(nèi)item的初始值寬度。我們看一下下面的這個(gè)例子:
父容器container寬度為600px，兩個(gè)子元素的寬度分別為300px、100px，那么父容器在橫軸上并沒有被完全填滿，但是就是想任性的不想其他人看到元素背后的綠色怎么辦~，這個(gè)時(shí)候我們就用上了flex-grow，讓元素都自己變胖一點(diǎn)嘍。

http://jsfiddle.net/HqRunMan/...

分別對(duì)兩個(gè)子元素設(shè)置了flex-grow，要胖當(dāng)然是大家一起變胖啦。但是flex-grow不一樣，也就是說(shuō)兩個(gè)元素的肥胖因子不太一樣， flex-grow越大，被分配余下空間的寬度就越大。

remaining（剩余分配空間）: 600px - 300px - 100px = 200px

一起變胖的承受能力: 1 + 2 = 3

子元素灰灰需要接納的肉肉寬度: (200 * 1 / 3) px =  66.67px    
灰灰新的身體寬度= 300px + 66.67px = 366.67px;

子元素小橘需要接納的肉肉寬度: (200 * 2 /3) px = 133.33px   
小橘新的身體寬度= 100px + 133.33px = 233.33px;

瘦成閃電的誓言還在么

讓我們想象一下，子元素灰灰和小橘在幸福的生活中，越來(lái)愈胖，突然有天他們回家發(fā)現(xiàn)這個(gè)家的大小再也容不下他們了。傷心欲絕的他們決定使出自己與生俱來(lái)的瘦身本領(lǐng)，拿起flex-shrink，一道金光閃過(guò)，終于這個(gè)家可以容下他們了。

http://jsfiddle.net/HqRunMan/...

容器仍然是600px， 灰灰500px， 小橘300px， 需要一起減掉200px才可以。但是灰灰和小橘的瘦身能力明顯不一樣，他們?cè)O(shè)置了不同的flex-shrink，分別為1和3。誰(shuí)的瘦身能力強(qiáng)，誰(shuí)就多瘦一點(diǎn)嘍。瘦掉的這200px需要平分到灰灰加上小橘身上的每一個(gè)px上。

remaining 需要分配的空間：600px - 500px - 300px = -200px

所有px一起變瘦的能力： 1 * 500 + 3 * 300 = 1400

子元素灰灰需要減掉的肉肉寬度 =（ -200 *  （1 * 500)/1400 ）px = -71.42px
瘦身后的灰灰寬度 = 500px -71.42px = 428.58px

子元素小橘需要減掉的肉肉寬度 =（ -200 *  （3 * 300)/1400 ）px = -128.57px
瘦身后的小橘寬度 = 300px - 128.57px = 171.42px

應(yīng)用一下

講到這里，不得不動(dòng)手實(shí)現(xiàn)一個(gè)老生常談的題目了“實(shí)現(xiàn)一個(gè)兩列布局”，腦子里飛速旋轉(zhuǎn)一下， BFC、負(fù)margin、絕對(duì)定位、浮動(dòng)+calc，還有就是使用flex屬性啦，代碼check下:

http://jsfiddle.net/HqRunMan/...

左邊欄定寬，設(shè)置flex: 0 0 auto；關(guān)閉了flex-grow和flex-shrink功能，寬度不會(huì)隨著resize改變；
右側(cè)內(nèi)容，設(shè)置flex：1 1 auto；隨著resize自適應(yīng)寬度。

總結(jié)

flex-basis可以當(dāng)寬度來(lái)使用，但是要考慮好和width的優(yōu)先級(jí)；

自適應(yīng)過(guò)程中，flex-grow可以使得未填滿的寬度被元素瓜分占據(jù)；flex-shrink可以使得容器空間不夠大的子元素瘦身。

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

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

相關(guān)文章

  • 新手flex布局入門篇，看這篇文章就夠了

    摘要：提綱介紹盒子模型什么是基礎(chǔ)項(xiàng)目實(shí)戰(zhàn)視頻源碼鏈接介紹參考文檔什么是層疊樣式表是層疊樣式表的縮寫。布局簡(jiǎn)稱，布局是中一種新的布局模式，用于改進(jìn)傳統(tǒng)模式中標(biāo)簽對(duì)齊方向以及排序等等缺陷。主要用設(shè)置在容器里面嚴(yán)著主軸的排列方式。 提綱 CSS介紹 盒子模型 什么是flexbox flex-direction flex-wrap flex-flow justify-content align-i...

    Lionad-Morotar 評(píng)論0 收藏0

  • CSS || flex筆記

    摘要：五個(gè)取值與主軸方向有關(guān)默認(rèn)值左對(duì)齊右對(duì)齊居中兩端對(duì)其，間的間隔距離相等每個(gè)兩側(cè)的間隔相等，相當(dāng)于設(shè)置左右值相等。默認(rèn)值為即使存在剩余空間寬度，也不放大。默認(rèn)值為，表示本來(lái)的大小。 Flex布局 Flex是flexible box的簡(jiǎn)稱，純粹用來(lái)布局的屬性 1 flex和inline-flex 任何容器都可以知道為Flex布局，塊級(jí)元素使用display: flex; ；行內(nèi)元素使用i...

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

  • 再次簡(jiǎn)單明了總結(jié)flex布局，一看就懂...

    摘要：可能值含義如下假設(shè)主軸為水平方向左對(duì)齊右對(duì)齊居中對(duì)齊兩端對(duì)齊沿軸線均勻分布各行將根據(jù)其值伸展以充分占據(jù)剩余空間備注設(shè)置，不然默認(rèn)按照比例排滿一行。默認(rèn)值為，表示當(dāng)空間不足時(shí)，自動(dòng)縮小，其可能的值為整數(shù)，表示不同的縮小比例。 思維導(dǎo)圖 showImg(https://user-gold-cdn.xitu.io/2019/2/26/16927612eee6be1a?w=714&h=1110...

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

  • 再次簡(jiǎn)單明了總結(jié)flex布局，一看就懂...

    摘要：可能值含義如下假設(shè)主軸為水平方向左對(duì)齊右對(duì)齊居中對(duì)齊兩端對(duì)齊沿軸線均勻分布各行將根據(jù)其值伸展以充分占據(jù)剩余空間備注設(shè)置，不然默認(rèn)按照比例排滿一行。默認(rèn)值為，表示當(dāng)空間不足時(shí)，自動(dòng)縮小，其可能的值為整數(shù)，表示不同的縮小比例。 思維導(dǎo)圖 showImg(https://user-gold-cdn.xitu.io/2019/2/26/16927612eee6be1a?w=714&h=1110...

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

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

0條評(píng)論

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