flex 大致分為兩類屬性：容器屬性和專案屬性（容器內部專案的屬性）。flex 屬性（flex：1）如就給容器內部專案設定的屬性。
flex屬性是flex-grow,flex-shrink和flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。接下來我們逐一介紹這三個屬性:
flex-grow
flex-shrink
flex-basis
flex grow屬性設定 flex 容器中的 ** 可用空間 ** 應分配給該項的大小。如果所有同級專案都具有相同的值，則所有專案將獲得相同的可用空間份額，否則將根據定義的不同比率進行分配。
從左到右三個紅色方塊的寬度依次為 48.5 + 97 + 48.5 = 194，加上 6 個邊框剛好 200。三個 item 按照 1:2:1 的比例佔滿了容器。上面我們並沒有給 item 新增寬度，如果我們給它們加上 width 會怎麼計算呢？
我們通過控制台檢視三個 item 的寬度從左到右依次是 61 + 72 + 61 = 194，加上 6 個邊框剛好 200。但是三個元素並不是按照 1:2:1 的比例分配的。這是為什麼呢？仔細看定義後知道，我們給 wrap 設定了width為 200px，三個 item 設定了 50px，所以剩餘的是 50px。剩餘的 50px 按照 1:2:1 的比例又分別分配給了三個width為 50px 的 item。 注意這個比例是剩餘空間分配的分配比例，而不是分配後元素自身的比例。
設定專案的收縮比例，如果空間不足，該專案將縮小。
預設值為 1。
設定或檢索彈性盒伸縮基準值。如果所有子元素的基準值之和大於剩餘空間，則會根據每項設定的基準值，按比率伸縮剩餘空間。
flex 屬性是 flex-grow, flex-shrink 和 flex-basis 的簡寫。
CSS3 flex彈性布局
css3的flex布局用法 任何乙個容器都可以指定為flex布局 行內元素也可以使用flex布局。box webkit核心的瀏覽器，必須加上 webkit字首 box 設為flex布局後，子元素的float clear 和vertical align屬性將失效。基本概念 採用css3 flex布局的...
CSS3 flex 彈性布局
為盒子模型提供最大的靈活性 基本概念 設定了 flex 布局的元素稱為 flex container 容器 所有子元素稱為 flex ite 專案 容器屬性 flex wrap 換行 預設情況下專案都排在一條線上，如果超出容器，則減少專案寬度，該屬性定義如何換行 flex flow 是 flex d...
CSS3 Flex 彈性模型布局用法
檢視 css某個屬性，相容情況 css3 flex布局 盒子模型 box sizing border box 預設 content box 平時普通盒子模型，padding，border，盒子會變大,向外擴充套件 border box 盒子模型，padding,border,盒子模型不變大,向內擴充...