flex item的width VS flex-basis

flexbox的子元素flex item的宽度，按照以下规则计算：

content>width>flex-basis(limited by max/min-width)

1. flex-basis的缺省值为auto；
2. 如果flex-basis的值为auto，那么flex item的宽度由width属性决定；如果没有设置width，flex item的宽度由它的内容决定；
3. 如果flex-basis值在max-width和min-width之间，flex-basis决定宽度；
4. 如果flex-basis大于max-width，则宽度为max-width；
5. 如果flex-basis小于min-width，则宽度为min-width；
6. 这里会出现过大内容的问题，如果flex item的内容宽度很宽，会使flex item的宽度也变大；（很多布局中都会出现超长字符或者超大内容撑大布局的问题）；

 

 

 

转载于:https://www.cnblogs.com/Jamie1032797633/p/9456752.html