您好,登錄后才能下訂單哦!
這篇先講flex取值的問題,后面的文章在深入講解彈性布局的應用。
1.flex是由 flex-grow,flex-shrink,flex-basis組成。看下圖
其中flex-grow:代表父容器在主軸上還有多少剩余空間。
關于剩余空間的理解:父容器(彈性盒子)在主軸方向上還有多少可利用空間。
外層div彈性布局,剩余空間=box.width - item01.width - item02.width - item03.width
flex-grow默認值為0,且為非負數。
eg01:
結果:
將 class="item02"的div,樣式設置flex:2,效果:
只有class="item02"的div設置了flex:2樣式,意思是剩余空間分成2份,全部給item02.flex默認值0表示不要剩余空間。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。