弹性项目的尺寸计算公式

在flex-direction为row，writing-mode为horizontal-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被忽略，这时最小尺寸直接取最小内容尺寸）。
   目前Chrome的bug：就算flex-basis的值不是auto，width也会参与最小尺寸的计算。
4. 最大尺寸：max-width
5. 伸缩：flex-grow和flex-shrink

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

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