flex

來自:
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),則項目將佔據固定空間。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章