css--flex佈局問題

flex-shrink: 0;如果值爲0,表示不減小。

詳解:

該屬性用來設置,當父元素的寬度小於所有子元素的寬度的和時(即子元素會超出父元素),子元素如何縮小自己的寬度的。 flex-shrink的默認值爲1,當父元素的寬度小於所有子元素的寬度的和時,子元素的寬度會減小。值越大,減小的越厲害。如果值爲0,表示不減小。

 舉個例子: 父元素寬400px,有兩子元素:A和B。A寬爲200px,B寬爲300px。 則A,B總共超出父元素的寬度爲(200+300)- 400 = 100px。 如果A,B都不減小寬度,即都設置flex-shrink爲0,則會有100px的寬度超出父元素。 

 flex-wrap:讓彈性盒元素在必要的時候拆行:

nowrap 默認值。規定靈活的項目不拆行或不拆列。
wrap 規定靈活的項目在必要的時候拆行或拆列。
wrap-reverse 規定靈活的項目在必要的時候拆行或拆列,但是以相反的順序。
initial 設置該屬性爲它的默認值。請參閱 initial
inherit 從父元素繼承該屬性。請參閱 inherit
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章