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

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

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

问题1

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

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

为什么css 中设置了

img {
  max-width: 100%;
}

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

阅读 3.4k

5 个回答

得票最新

我的猜想

flex子元素上的属性flex默认值
flex-basis: auto;
flex-grow: 0;
flex-shrink: 1;

这里子元素的宽度的计算

先计算flex-basis:auto的值，这里就是元素的内容大小（没有显示的设置width）。flex子元素的大小是img的大小，但是width:100%; 并不能获知它的大小，因此此时flex子元素的大小我们不知啊，所以它的大小应该是自身的固定尺寸。
flex子元素的宽度加起来比父元素的宽度大，然后再收缩，但是不能低于min-width。那么min-width是什么的？我们没有显示设置，应该就是它的min-content，就是img的宽度，它的宽度因为设置成了百分比，所以min-width: 0，所以可以尽可能的缩小。它们的flex-shrink都是1，收缩的大小都是一样的，所以收缩之后各个图片的大小关系和img固定尺寸的大小关系是一样的。

此时，各个flex子元素的宽度就确定了，那么照片的大小（width:100%）也就可以计算出了，就是此时flex子元素的宽度，这就不会有溢出了。