資訊專欄INFORMATION COLUMN
摘要：容器仍然是，灰灰，小橘，需要一起減掉才可以。但是灰灰和小橘的瘦身能力明顯不一樣，他們設置了不同的，分別為和。瘦掉的這需要平分到灰灰加上小橘身上的每一個上。
前言
flex布局，想必css江湖上的各位俠士都用得很多了，那我們今天就來說說flex-item下的幾個不太常用的屬性吧（其實是鄙人用的不多（┬＿┬）而已啦，好奇了解了下）。
從容貌上來看，grow，shrink，grow，shrink，哎呦，這不就是我一年下來減肥長胖減肥長胖的節奏么？╭∩╮（￣▽￣）╭∩╮
從字面上的意思來看，就是對flex-item進行身材的改變，很符合flex自適應的概念嘛。那這兩個屬性到底是有來嘛意思，有什么用呢？下面就來了解下嘍。
參照物
flex-grow、flex-shrink、flex-basis三姐妹可以被flex屬性直接囊括了，flex：flex-grow flex-shrink flex-basis, eg, flex: 0 1 auto;說好的只了解這兩個屬性的，為什么又來了個flex-basis?因為人身材變胖變瘦是要有對照物的嘛，需要和原裝元素進行對比才可以。
flex-basis指item的content寬度，和屬性width有著相同的作用，不過兩者有著不同的優先級。
如果flex-basis和width同時設置了數值，則以flex-basis為準；
如果flex-basis設置為auto且width設置了確切的寬度值，以width設置的寬度值為準；
如果flex-basis設置為auto且width沒有設置，則flex-basis以實際內容的寬度值為準;
一起變成張惠妹
好了，那我們已經有了基本的對照參考值，即容器內item的初始值寬度。我們看一下下面的這個例子:
父容器container寬度為600px，兩個子元素的寬度分別為300px、100px，那么父容器在橫軸上并沒有被完全填滿，但是就是想任性的不想其他人看到元素背后的綠色怎么辦~，這個時候我們就用上了flex-grow，讓元素都自己變胖一點嘍。
http://jsfiddle.net/HqRunMan/...
分別對兩個子元素設置了flex-grow，要胖當然是大家一起變胖啦。但是flex-grow不一樣，也就是說兩個元素的肥胖因子不太一樣， 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;
瘦成閃電的誓言還在么
讓我們想象一下，子元素灰灰和小橘在幸福的生活中，越來愈胖，突然有天他們回家發現這個家的大小再也容不下他們了。傷心欲絕的他們決定使出自己與生俱來的瘦身本領，拿起flex-shrink，一道金光閃過，終于這個家可以容下他們了。
http://jsfiddle.net/HqRunMan/...
容器仍然是600px， 灰灰500px， 小橘300px， 需要一起減掉200px才可以。但是灰灰和小橘的瘦身能力明顯不一樣，他們設置了不同的flex-shrink，分別為1和3。誰的瘦身能力強，誰就多瘦一點嘍。瘦掉的這200px需要平分到灰灰加上小橘身上的每一個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
應用一下
講到這里，不得不動手實現一個老生常談的題目了“實現一個兩列布局”，腦子里飛速旋轉一下， BFC、負margin、絕對定位、浮動+calc，還有就是使用flex屬性啦，代碼check下:
http://jsfiddle.net/HqRunMan/...
左邊欄定寬，設置flex: 0 0 auto；關閉了flex-grow和flex-shrink功能，寬度不會隨著resize改變；
右側內容，設置flex：1 1 auto；隨著resize自適應寬度。
總結
flex-basis可以當寬度來使用，但是要考慮好和width的優先級；
自適應過程中，flex-grow可以使得未填滿的寬度被元素瓜分占據；flex-shrink可以使得容器空間不夠大的子元素瘦身。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/116390.html
摘要：提綱介紹盒子模型什么是基礎項目實戰視頻源碼鏈接介紹參考文檔什么是層疊樣式表是層疊樣式表的縮寫。布局簡稱，布局是中一種新的布局模式，用于改進傳統模式中標簽對齊方向以及排序等等缺陷。主要用設置在容器里面嚴著主軸的排列方式。 提綱 CSS介紹 盒子模型 什么是flexbox flex-direction flex-wrap flex-flow justify-content align-i...
摘要：五個取值與主軸方向有關默認值左對齊右對齊居中兩端對其，間的間隔距離相等每個兩側的間隔相等，相當于設置左右值相等。默認值為即使存在剩余空間寬度，也不放大。默認值為，表示本來的大小。 Flex布局 Flex是flexible box的簡稱，純粹用來布局的屬性 1 flex和inline-flex 任何容器都可以知道為Flex布局，塊級元素使用display: flex; ；行內元素使用i...
摘要：可能值含義如下假設主軸為水平方向左對齊右對齊居中對齊兩端對齊沿軸線均勻分布各行將根據其值伸展以充分占據剩余空間備注設置，不然默認按照比例排滿一行。默認值為，表示當空間不足時，自動縮小，其可能的值為整數，表示不同的縮小比例。 思維導圖 showImg(https://user-gold-cdn.xitu.io/2019/2/26/16927612eee6be1a?w=714&h=1110...
摘要：可能值含義如下假設主軸為水平方向左對齊右對齊居中對齊兩端對齊沿軸線均勻分布各行將根據其值伸展以充分占據剩余空間備注設置，不然默認按照比例排滿一行。默認值為，表示當空間不足時，自動縮小，其可能的值為整數，表示不同的縮小比例。 思維導圖 showImg(https://user-gold-cdn.xitu.io/2019/2/26/16927612eee6be1a?w=714&h=1110...
閱讀 2517·2021-11-18 10:02
閱讀 1985·2021-11-09 09:45
閱讀 2432·2021-09-26 09:47
閱讀 1030·2021-07-23 10:26
閱讀 1072·2019-08-30 15:47
閱讀 3364·2019-08-30 15:44
閱讀 974·2019-08-30 15:43
閱讀 888·2019-08-29 13:50
