记录一次flex响应式布局错乱问题

发表于 更新于 分类于 ， ， 阅读次数：

印象里边，flex是非常丝滑的响应式布局模型，flex子元素可以非常方便的跟随父级元素变大缩小。实际使用的时候，大多数情况都是符合预期的。但偶尔也会有子元素里边用了某些组件以后，子元素无法缩小的问题。

正常情况

正常情况下,我们想要子元素等分父元素，只需要给子元素加一行属性flex: 1就可以了。事实上，此时页面尺寸变化，子元素都会跟随适应大小，始终保持等比大小。

1
2
3
4
5
6
7
8
9
10
11
.flex-wrapper {
  display: flex;
  flex-wrap: nowrap;
  margin: 20px;
  height: 200px;
  width: 50%;
}
.flex-item {
  border: 1px solid #000;
  flex: 1;
}

flex-1.png

特殊情况

当我们给每个子元素添加一段文本，并且给文本添加超出省略号属性。期望的情况是，页面缩小时，每个子元素同步缩小，缩小到一定程度时子元素内文本超出并以省略号结尾。但实际的情况是，子元素缩小到一定程度后无法再缩小。

1
2
3
4
5
6
.custom-container {
  /* 文字超出隐藏 */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

flex-2.png

解决方案

在每个子元素上添加min-width: 0以后，子元素可以按照预期展示。

flex-3.png

要点

在 Flex 布局中，子元素的默认min-width是auto，意味着它会根据内容宽度确定最小值，导致内容不会被压缩。因此，在子元素上设置min-width之后，这告诉浏览器改元素内容可以比内容占位更小，从而使得展现符合预期。