在前篇博文中已經詳細敘述了flex布局中的容器屬性，那麼現在就來談談flex專案屬性那些事······
以下6個屬性是作用在flex專案上的：
1.1 order屬性
該屬性定義專案的排列順序，數值越小，排列越靠前，預設值為0。用法及效果如下：
html**
class="flex-box">
class="flex-item">item1div>
class="flex-item">item2div>
class="flex-item">item3div>
div>
css**
.flex-box
.flex-item
div:first-child
div:nth-child(2)
div:last-child
注意，在本例中沒有設定flex-direction的屬性，那麼其值預設是row，你也可以嘗試將其設定成column，那麼flex專案則會根據order縱向排列。
1.2 flex-grow屬性
該屬性定義專案的放大比例，預設為0，即不作任何的放大。flex容器下的專案是根據這個值的比例對容器的剩餘空間進行瓜分的。用法及效果如下：
.item-class
說明：在使用這個屬性的時候，一般也最好不要對flex專案設定寬度/高度，否則會影響flex容器的比例分配。
1.3 flex-shrink屬性
該屬性定義了專案的縮小比例，預設為1，即專案縮小。用法及效果如下：
.item-class
說明：這裡flex容器的寬度設定成600px，flex專案的寬度均為300px，margin:10px；在為item1分配完空間後，剩下的空間被後面兩個專案按比例縮小分配。
1.4 flex-basis屬性
該屬性定義了在分配多餘空間之前，專案佔據的主軸空間(main size)。瀏覽器根據這個屬性，計算主軸(main asix)是否有多餘空間。她的預設值為auto，即專案 原本大小。它換可以設定為跟width屬性一樣的值（100px），即專案佔據固定空間（容器寬度不夠自動被壓縮）。用法及效果如下：
.item-class
說明：該屬性的用法就像是使用width(flex-direction:row; 的時候)或heigh(direction為column的時候)屬性那樣，在容器寬度不夠的時候，它會按照flex-shrink屬性的預設值壓縮專案。
1.5 flex屬性
該屬性是前三個屬性：flex-grow、flex-shrink、flex-basis的簡寫形式。預設值為0 1 auto，即不放大，自動縮小，後面兩個屬性值是可選項。該屬性有兩個快捷鍵值：auto(0 1 auto)，none（0 0 auto）。建議優先使用這個屬性，而不是單獨寫三個分離的屬性。
1.6 align-self屬性
該屬性允許單個專案有與其他專案不一樣的對齊方式。可覆蓋作用在flex容器上的align-items屬性。預設值為auto，表示繼承父元素align-items屬性，如果沒有父元素，則等同stretch。value的取值包括：auto、flex-start、flex-end、end、baseline、stretch。該屬性額取值除了auto致親愛，這個屬性作用在專案上的效果跟align-items作用在專案父元素（flex容器）上的效果是一樣的，唯一不同的是：align-self僅對使用該屬性的專案其效果，align-items是對所有的專案其效果。至於各種屬性值所起的效果，大家可以參考前篇博文《細說css3 flex布局值flex容器屬性》。
至此，關於css3的flex布局就介紹完了，嘗試運用下吧，真的很強大！
CSS3 flex彈性布局之flex屬性
flex 大致分為兩類屬性 容器屬性和專案屬性 容器內部專案的屬性 flex 屬性 flex 1 如就給容器內部專案設定的屬性。這裡的 wrap 指容器，item 我們稱作專案。我們還需要知道flex屬性是flex grow,flex shrink和flex basis的簡寫，預設值為0 1 aut...
CSS3 Flex布局（容器）
item1 item2 item3 item4 item5 flex flow屬性是flex direction屬性和flex wrap屬性的簡寫形式，預設值為row nowrap。justify content屬性定義了專案在主軸上的對齊方式。align items屬性定義專案在交叉軸上如何對齊。...
CSS3 flex 布局 解析
今天整理下最近對flex的理解 flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。設為flex布局以後，子元素的float clear和vertical align屬性將失效。它即可以應用於容器中，也可以應用於行內元素，2009年，w3c提出了一種新的方案 f...