flex属性

• 基础
• flex属性是flex-grow, [child::flex-shrink] 和 flex-basis的简写，默认值为0 1 auto(仅缩小)。后两个属性可选。
• base::弹性布局item的伸缩

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。 建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

• 尽管可以伸缩，但最终会被限制在min-width和min-height
  • 相关问题：width对flex-1伸缩的最大限制影响

示例

• flex: 0 0 30%
  • 会导致一行排列三个元素，空余的空间会导致元素被拉伸

最佳实践

• 设置伸缩的同时显式设置最小宽度（可以通过直接设置尺寸（宽高）来达到）
  • [base::min-width和min-height]