來自:
http://mp.weixin.qq.com/s/QbeDbfMQMbPPhmd_q5ELDQ
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫,默認值爲0 1 auto。後兩個屬性可選。有兩個快捷值:auto (1 1 auto) 和 none (0 0 auto)。
flex-grow(基本網格佈局)定義項目的放大比例,默認0,即就算有剩餘空間,也不放大
如果所有項目的flex-grow屬性都爲1,則它們將等分剩餘空間(如果有的話)。如果一個項目的flex-grow屬性爲2,其他項目都爲1,則前者佔據的剩餘空間將比其他項多一倍。flex-shrink定義了項目的縮小比例,默認1,即如果空間不足,該項目將縮小
如果所有項目的flex-shrink屬性都爲1,當空間不足時,都將等比例縮小。如果一個項目的flex-shrink屬性爲0,其他項目都爲1,則空間不足時,前者不縮小。- flex-basis(百分比佈局)定義了在分配多餘空間之前,項目佔據的主軸空間(main size)。瀏覽器根據這個屬性,計算主軸是否有多餘空間。它的默認值爲auto,即項目的本來大小
它可以設爲跟width或height屬性一樣的值(比如350px),則項目將佔據固定空間。