javascript - 关于这个Flex布局，请大家帮忙分析下?

Question

演示Demo

图中 一个flex容器内部有四个div元素，
div内部的img的宽度设置为100px。

默认情况下flex-wrap=nowrap flex子项会一行显示且不允许换行，因此可能会出现宽度溢出的问题。

问题1

“因此可能会出现宽度溢出的问题” ： 这个宽度溢出应该也是有 条件的吧？ 虽然flex子项的累计宽度大于flex容器，但是默认情况下 flex子项是允许收缩的。 如果收缩以后还是超出flex容器的宽度，那才会出现溢出。
我的这个理解对吗？

问题2

基于问题1， 上面的四个flex 子项div， 为什么他们没有收缩 适应fle容器的宽度，而是选择了溢出？
flex子项他们有最小宽度限制吗？ 我看div和img的min-width都是0px，并没有最小宽度限制。

问题3

为什么css 中设置了

img {  max-width: 100%;}

就能让四个图片收缩到 适应flex容器的宽度，而不会出现溢出的情况。

b

Answer 1

flex 的成员大小计算有一个比较重要的属性就是 flex-basis,如果没有设置 flex-basis 属性,那么是会根据成员自身进行推算。

可能会影响这个推算的成员属性大概有 width, max-width, min-width 还有成员的 min-content, max-content。

例如成员没有设置 width 这些属性,那么优先就会取 max-content 去计算。以文本为例,文本其 max-content 就是一行文本下的总长度。计算后还可能会对比 min-content,来保证最后计算出来宽度不能小于 min-content,默认文本的 min-content 是一个字符的宽度,如果设置了 white-space: nowrap; 那么 min-content 会变为 max-content 一样的大小。如果这个时候设置了 min-width 属性,那么就会比较 min-width,而不去比较 min-content 了。举这个例子主要是说明其中不同属性互相影响的复杂性。这里有一个 overflow 属性影响计算的例子(https://codepen.io/changli/pen/poGMjKj)

当同时设置这些属性时,那些属性优先,那么属性被忽略,这其实就涉及到 flex 布局的实现了,这个可以看规范(https://drafts.csswg.org/css-flexbox/)

从应用的角度看,主要知道哪些属性会影响到计算就可以了,太过深入容易丧失对 css 的乐趣。

Answer 2

首先，我发现Firefox对于flex的调试更好一些，题主可以试试用火狐看

如图，你会发现有个“最小尺寸” 英文Minimum Size，所以4个div不会收缩
mdn中可见https://developer.mozilla.org/en-US/docs/Web/CSS/flex#initial

It shrinks to its minimum size to fit the container

关于为什么会有这个Minimum Size
请研究https://drafts.csswg.org/css-flexbox/#min-size-auto
规范的这块部分。我看了一会，并没有看明白。。。
可以搜索min-content Minimum Size研究一下
不过可以断定的是， min-width是0px只是个computed计算里显示的值 ，如果你手动指定min-width为0px，就会收缩了。我记得我曾经也碰见过一个类似问题，将computed里显示的默认值变成手动设置的css代码，效果就不一样了。

参考
https://medium.com/the-crazy-coder/the-mystery-of-css-flex-la...
https://www.bigbinary.com/blog/understanding-the-automatic-mi...
https://fantasai.inkedblade.net/style/discuss/flexbox-min-size/
https://firefox-source-docs.mozilla.org/devtools-user/page_in...

The second reason is that flexbox prevents small items from shrinking to zero size during this removal of negative free space. The items will be floored at their min-content size — the size that they become if they take advantage of any soft wrapping opportunities available to them.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible...

---

调试css真的是个黑盒，里边老多变量的值和逻辑都是不展示出来的。只能看规范猜。等有时间了研究一下chromium的css渲染实现