在flex-direction
为row
,writing-mode
为horizontal-tb
的父弹性盒子中,弹性项目flex item
的尺寸由以下属性决定:
- 盒模型
box-sizing
:尺寸按content-box
计算还是按border-box
计算; - 基础尺寸:优先级
flex-basis
>width
> 最大内容尺寸
如果flex-basis
的值不是auto
,则由它决定基础尺寸;否则,如果有width
,则由width
决定基础尺寸;否则由最大内容尺寸代替基础尺寸;flex-basis
:content
/max-content
效果等同于 最大内容尺寸; - 最小尺寸:优先级
min-width
>width
|| 最小内容尺寸
如果有min-width
,则由它决定最小尺寸;否则,由min
(width
, 最小内容尺寸) 决定最小尺寸(例外:如果flex-basis
的值不是auto
,则width
被忽略,这时最小尺寸直接取最小内容尺寸)。
目前Chrome
的bug
:就算flex-basis
的值不是auto
,width
也会参与最小尺寸的计算。 - 最大尺寸:
max-width
- 伸缩:
flex-grow
和flex-shrink
计算公式:flex item
的最终尺寸 = min
(max
(基础尺寸 + 伸缩尺寸, 最小尺寸), 最大尺寸)
一些定义:
最小内容尺寸:元素文本内容中最长单词的长度,或者元素内部固定尺寸的子元素中最长子元素的长度;
内容尺寸/最大内容尺寸:元素内容的长度。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。