flex-item尺寸的计算
flex布局中对其子项的width百思而不得其姐, 翻阅资料, 略作个解,不正之处,还望指明.
一.basis尺寸的确定
1. 0%
基础尺寸为0
2.auto
若width值为auto,basis为auto, 则最大内容宽度为基础尺寸
3.设置固定的值
若basis和width同时设置了具体数值,则使用basis值为基础尺寸
二.最小尺寸的确定
由min-width, 最小内容宽度, width决定
由min-width时,min-width为最小值
无min-width时,比较width和最小内容宽度较小者为最小尺寸
无min-width时, width为auto,则最小尺寸为最小内容宽度
若flex-item设置了overflow:hidden,且最小尺寸是由最小内容宽度决定的,那么最小尺寸限制无效
三.最终尺寸
由基础尺寸,最小尺寸,弹性拉升和收缩决定
抛去弹性拉升和收缩下,由基础尺寸和最小尺寸决定,如果基础尺寸小于最小尺寸,则会拉升至最小尺寸,若最小尺寸小于基础尺寸,则用基础尺寸.
图解:
flex : 0 1 auto
2.flex: 0 1 0%
举一反三,数值可以有很多变形,熟悉以上规则就能合理的解释为什么宽度是那么宽,grow与shrink自不必谈,在基础上拉升压缩宽度.
另一个flex-item中省略号的问题:
