flex布局中flex:0 1 auto是什么


flex:0 1 auto;

flex是flex-grow,flex-shrink,flex-basis3個屬性結合在一起的縮寫形式,后兩個屬性可選寫

flex-grow

表示當子元素的空間小於父元素的空間時,如何處理剩余空間,
默認值為0表示不占有剩余空間;
當子元素都設置為1時表示平均分配剩余空間;
當一個子元素為2其余子元素為1時為2的子元素占據的剩余空間比其他子元素多一倍;
當一個子元素為1其余子元素為0,為1的子元素占據全局剩余空間

felx-shrink

表示當子元素的空間大於父元素的空間時,如何縮小子元素
默認值為1表示等比縮小
當所有子元素都設置為1時所有子元素都會等比例縮小
當一個子元素為0其余子元素為1是表示為0的子元素不縮小,其余元素縮小

flex-basis

用於設置項目占據的主軸空間,設置為auto表示項目占據的主軸大小等於項目的實際內容大小,設置為固定值表示項目占據的主軸大小等於固定值


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM