flex-basis我想了解当没有为、width或属性设置显式值时min-width，flexbox 如何计算最终弹性项目的宽度。max-width换句话说，flexbox如何仅根据内容计算flex-item的宽度？
这是一个示例代码（可在codepen上找到）：
.container {
display: flex;
width: 600px;
}
.container div {
outline: 1px dotted black;
}<div class="container">
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga aspernatur suscipit aliquam beatae vitae harum, eius expedita quidem incidunt velit!</div>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Error ad natus dolores harum, ex fuga voluptates dignissimos possimus saepe officia.</div>
</div>在这个例子中，两个divs （flex-items）的计算宽度是相同的：（300px我用“inspect element”调试工具看到）。
现在，如果我向第一个 div 中的文本添加 10 个字符（此处提供了分叉的 codepen），我会看到第一个 div 的宽度为311.719px，而第二个 div 的宽度为288.281px。
因此，似乎更多的内容为弹性项目提供了更多的宽度，但是这种基于内容的计算到底是如何工作的呢？当内容不仅仅是文本而且还有一些替换内容（例如图像）时该怎么办？
另外，我通常应该练习显式设置flex-basis或width属性以避免基于内容的元素大小的不确定性吗？换句话说，不显式设置 Flex-Item 宽度并让 Flexbox 根据其内容确定它的宽度的用例是什么？
对于这种特殊情况，您需要考虑设置的默认收缩效果，flex-shrink其默认值为1。最初你的元素会溢出，如下所示：
$(\'div\').each(function() {\n console.log($(this).width());\n}).container {\n display: flex;\n width: 600px;\n}\n\n.container div {\n outline: 1px dotted black;\n flex-shrink:0;\n}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>\n<div class="container">\n <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga aspernatur suscipit aliquam beatae vitae harum, eius expedita quidem incidunt velit! 123456789</div>\n <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga aspernatur suscipit aliquam beatae vitae harum, eius expedita quidem incidunt velit!</div>\n</div>如果您检查1011.3px第一个元素和935.3px第二个元素的元素，那么我们的总溢出量为1011.3px + 935.3px - 600px = 1346.6px。这两个元素的溢出都会减少，以便它们可以放入弹性容器内。我们还应该考虑到元素不会以相同的方式收缩，因为它们没有相同的初始宽度。最大的会缩小更多。然后我们将得到一个因子1011.3/935.3 = 1.08，公式为：
x + y = 1346.6 where y = 1.08*x\n所以x = 647px和y = 699.6px
1011.3px - 699.6px = 311.7px我们将以和结尾935.3px - 673.3px = 288.3px：
x + y = 1346.6 where y = 1.08*x\n$(\'div\').each(function() {\n console.log($(this).width());\n}).container {\n display: flex;\n width: 600px;\n}\n\n.container div {\n outline: 1px dotted black;\n}\n\nflex-shrink 属性指定 Flex 收缩因子，该因子决定当分配负的可用空间时，Flex 项目相对于 Flex 容器中的其余 Flex 项目收缩多少。参考
\n注意：分配负空间时，弹性收缩系数乘以弹性基础尺寸。这会根据项目能够缩小的程度按比例分配负空间，因此，例如，在较大项目显着减少之前，小项目不会\xe2\x80\x99t 缩小到零。参考
\n
完整算法的官方规范：
\nhttps://www.w3.org/TR/css-flexbox-1/#resolve-flexible-lengths
\n请注意，存在min-width可能影响最终计算的约束，因为默认情况下元素不能缩小超过其内容大小。
这是与上面一些代码相同的代码 ，您会注意到计算有所不同，因为第一个元素的约束min-width等于第一个句子的长度，其中我们有
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>\n<div class="container">\n <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga aspernatur suscipit aliquam beatae vitae harum, eius expedita quidem incidunt velit! 123456789</div>\n <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga aspernatur suscipit aliquam beatae vitae harum, eius expedita quidem incidunt velit!</div>\n</div>$(\'div\').each(function() {\n console.log($(this).width());\n}).container {\n display: flex;\n width: 600px;\n}\n\n.container div {\n outline: 1px dotted black;\n}如果通过添加来删除此约束，min-width:0您将获得以前的值和一些溢出：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>\n<div class="container">\n <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga aspernatur suscipit aliquam beatae vitae harum, eius expedita quidem incidunt velit! 123456789</div>\n <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga aspernatur suscipit aliquam beatae vitae harum, eius expedita quidem incidunt velit!</div>\n</div>$(\'div\').each(function() {\n console.log($(this).width());\n}).container {\n display: flex;\n width: 600px;\n}\n\n.container div {\n outline: 1px dotted black;\n min-width:0;\n}\n\n当内容不仅仅是文本而且还有一些替换内容（例如图像）时该怎么办？
\n
同样的逻辑适用，内容的类型并不重要，重要的是元素的大小和min-width依赖于内容的约束。
\n\n另外，我通常应该练习显式设置 flex-basis 或 width 属性以避免基于内容的元素大小的不确定性吗？
\n
我会说是的。您应该完全控制您的布局，不要让内容为您做决定。
\n