外界影响因素 max-content / min-content
一、介绍
- max-content 根据内容的最大宽度来确定自身的宽度
- min-content 根据内容的最小宽度来确定自身的宽度
示例
max-content / min-content 的影响
二、如何影响的
1、仅设置 display: flex
- 不存在 width 和 flex-basis 的时候，元素的宽度应该是受 max-content 影响的
- 某个元素设置了 width 和 flex-basis 的时候，剩余元素的宽度受 max-content 影响的
2、设置 display: flex 和 flex: 1
假设容器的宽度为 1000px，且在设置成 flex 属性前,有 5 个元素均设置了 flex: 1，那么一般情况他们的伸缩比例是相同的，且强制设置其在主轴上的初始长度为 0。
这几个元素在主轴的上的宽度均小于平均宽度（200px）。那么分配剩余空间后，这几个元素的宽度（200px）相等
这几个元素有大于平均宽度（200px）的，有小于平均宽度（200px）的，但是加起来不大于 1000px，此时存在：
当所有的元素 min-content 小于等于平均宽度（200px）的时候，宽度平分，最终每一个元素都是平均宽度（200px）；
当有元素 min-content 大于平均宽度（200px）的时候，那么它的宽度最终为 min-content，然后剩余的宽度有另外的元素平分。
当这几个元素有大于平均宽度（200px），有小于平均宽度（200px）的，加起来大于 1000px，此时存在：
当这几个元素的 min-content 均未大于平均宽度（200px），那么这几个元素平分后最终均为平均宽度（200px）；
当有的 min-content 大于平均宽度（200px），有的小于平均宽度（200px），总的加起来并未超过 1000px，那么 1000px 减去大于平均宽度（200px）的 min-content，剩下的元素平分后，宽度相等，大于平均宽度（200px）的元素宽度均为其各自的 min-content。如果这时候最终总宽度大于 1000px，会溢出。
如果所有的元素的 min-content 均大于平均宽度（200px），那么最终宽度为各自的 min-content，溢出。
更新日志
2025/8/24 08:17
查看所有更新日志
e7112-于