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的宽度也变大;(很多布局中都会出现超长字符或者超大内容撑大布局的问题);
 
 
 
posted @ 2018-08-10 18:22  Jamie0327  阅读(711)  评论(0编辑  收藏  举报
levels of contents