Question

我阅读了mdn并用Google搜索了其他文档。我知道flex-basis的优先级比width更高，也比内容计算的width更高。

但似乎以上内容仅在flex-basis> = content min width时适用。具体来说（请注意，我使用的是“宽度”，而不是“最小宽度”），

如果我将flex-basis设置为0，则div元素的宽度不会变为0（似乎是最小内容宽度）。并且您可以将flex-basis更改为其他较小的值，例如2px，最终宽度仍然是最小内容宽度。：https://jsfiddle.net/afx3e14m/

    <div class='a'>
    <div class='b'>
    this is just a random statment
    </div>
    </div>

.a{display: flex;}
.b {flex: 0 0 0; 
border: 1px solid red;}

但是如果set width = 0，则div元素的宽度现在为0： https://jsfiddle.net/afx3e14m/1/

.a{display: flex;}
.b {flex: 0 0 auto;
width:0;
border: 1px solid red;}

此外，如果同时应用flex-basis和width，并且宽度小于flex-basis，则flex-basis即使小于最小内容宽度也将生效： https://jsfiddle.net/afx3e14m/2/

.a{display: flex;}
.b {flex: 0 0 2px;
width:0px;
border: 1px solid red;}

所以这确实令人困惑。似乎不像“ flex-basis优先，然后如果没有指定则回落到宽度”那样简单。这更像是，当flex-basis大于最小内容宽度时，这是正确的。但是，当宽度变窄时，柔韧性基础是否有效取决于宽度是否较小。如果width大于flex-basis且小于最小内容宽度，则将应用width而不是flex-basis。

我想知道是否有任何开发人员可以证实这一点或向我指出一些非常好的文档/教程。 MDN之类的东西很好，但是找不到关于flex-basis的全面逻辑。谢谢。

对flexbox flex-basis和width感到非常困惑

0 个答案: