设置 flex: 1 1 0 等于没设置 flex-basis 吗？-灵析社区
ZZZ葡萄皮## 前置知识 * `flex-basis`就相当于`width(flex-direction: row)`或`height(flex-direction: column;)`。 * 当两者同时出现的时候，width的值就被忽略了。 * flex默认值（不显式设置时） flex-grow: 0; flex-shrink: 1; flex-basis: auto; ## 情况一 照片flex使用默认值，`.text`的`flex-grow`设置为1 * 照片的`flex-basis(auto)`计算值就是它的宽度`200px`，`.text`元素的`flex-basis(auto)`就是它的最大内容宽度，就是**那些文字在一行上显示时的宽度** 。 * 文字比较长，照片和.text元素的宽度会大于其父元素的宽度，所以之后就会收缩。两者都设置了`flex-shrink: 1`，**故此时的照片的大小不再保持200px，而是变小** 。`.text`元素通过使文字换行来缩小它的宽度。 ## 情况二 照片flex使用默认值,将`.text`元素的`flex-basis`改为0，`flex-grow`改为1 * 照片的`flex-basis(auto)`计算值就是它的宽度`200px`, .text元素的`flex-basis`就是0。 * 此时，照片和.`text`元素的宽度会小于其父元素的宽度，然后增加元素的宽度。照片的`flex-grow: 0`,不会增加它的宽度。`.text`元素的`flex-grow: 1`,会增加它的宽度直到充满剩余空间，即父元素的content-width - img.width, 由于文字可以换行，所以没有溢出（如果有比较长的单词，还是可能会溢出的）。