flex-directionrowwriting-modehorizontal-tb的父弹性盒子中,弹性项目flex item的尺寸由以下属性决定:

  1. 盒模型box-sizing:尺寸按content-box计算还是按border-box计算;
  2. 基础尺寸:优先级 flex-basis > width > 最大内容尺寸
    如果flex-basis的值不是auto,则由它决定基础尺寸;否则,如果有width,则由width决定基础尺寸;否则由最大内容尺寸代替基础尺寸;
    flex-basis: content / max-content 效果等同于 最大内容尺寸;
  3. 最小尺寸:优先级 min-width > width || 最小内容尺寸
    如果有min-width,则由它决定最小尺寸;否则,由 min(width, 最小内容尺寸) 决定最小尺寸(例外:如果flex-basis的值不是auto,则width被忽略,这时最小尺寸直接取最小内容尺寸)。
    目前Chromebug:就算flex-basis的值不是autowidth也会参与最小尺寸的计算。
  4. 最大尺寸:max-width
  5. 伸缩:flex-growflex-shrink

计算公式:flex item 的最终尺寸 = min(max(基础尺寸 + 伸缩尺寸, 最小尺寸), 最大尺寸)

一些定义:
最小内容尺寸:元素文本内容中最长单词的长度,或者元素内部固定尺寸的子元素中最长子元素的长度;
内容尺寸/最大内容尺寸:元素内容的长度。


宗介
177 声望14 粉丝