white-space nowrap如何使得弹性盒布局“异常”

概述

我们先来看看简单的例子：在弹性盒子模型中添加了 white-space: nowrap 会使的该项失去弹性效果。

效果：

图中可以看出实际 flex-right 的宽度并没有 250px，而且 flex-left 也失去了 flex:1 的效果。

这个问题在实际开发中最常出现在弹性盒子模型中设置其中项内容超出显示省略符失效：

效果：

notice 部分并没有超出显示省略符效果，并且 flex-1 也失效了。

原理

在解释原理之前先要搞清楚弹性盒子模型的一些概念：

flex 容器 (flex container) 和 flex 项目 (flex item)

flex 容器 (flex container): 开启了 flex 布局的元素；flex 项目 (flex item):flex 容器里面的直接子元素

主轴 (main axis) 和 交叉轴 (cross axis)

主轴 (main axis)：flex 项目的排列方向；交叉轴 (cross axis)：主轴的垂直交叉方向。

其中 main start 是主轴的开始位置（与边框的交叉点）；main end：主轴的结束位置；cross start：交叉轴的开始位置；cross end：交叉轴的结束位置；main size：flex 容器或 flex 项目占据的主轴空间；cross size：flex 容器或 flex 项目占据的交叉轴空间。

图中 main size 是由 flex 容器或 flex 项目的 width 属性确定的，因此 width 属性也叫做 main size property。min/max main size 是由 flex 容器或 flex 项目的 min-width 和 max-width 属性确定的，因此 min-width 和 max-width 属性也叫做 min and max main size properties。

同样 cross size 是由 height 属性确定的，也叫做 cross size property，min/max cross size 也就是 min-height 和 max-height，也叫做 min and max cross size properties。

size suggestion

content size suggestion（直译内容尺寸建议）：是在主轴上的最小内容尺寸，如果有宽高比，通过宽高比转换确定侧轴的最大和最小尺寸。

specified size suggestion（直译指定尺寸建议）：是在主轴上通过 main size property 设置的固定尺寸

transferred size suggestion（直译转换尺寸建议）：如果 flex 项目具有固有的纵横比并且其计算的交叉尺寸属性是确定的，则传输的尺寸建议是通过纵横比转换的尺寸

content-based minimun size

content-based minimun size（基于内容的最小尺寸）: 没有固定纵横比的情况下，基于内容的最小尺寸值是 content size suggestion（建议内容尺寸）和 specified size suggestion（指定建议尺寸）中的最小值。有固定纵横比基于内容的最小尺寸值是 content size suggestion（建议内容尺寸）和 transferred size suggestion（转换建议尺寸）的最小值。

automatic Minimum Size

automatic Minimum Size（自动最小尺寸）: 关键字 auto 表示自动最小尺寸，这是 min-width 和 min-height 属性的初始值，而在非滚动容器的 flex 项目中，其主轴自动最小尺寸是 content-based minimun size（基于内容的最小尺寸），滚动容器的的 flex 项目中自动最小尺寸是 0。

概念解释完了，我们再来看看上面的 flexbox 布局例子，flex-1 所在的元素并非滚动容器因此他的 automatic Minimum Size（自动最小尺寸）的值就是 content-based minimun size（基于内容的最小尺寸）的值，而 content-based minimun size（基于内容的最小尺寸）的值又是 content size suggestion（建议内容尺寸）和 specified size suggestion（指定建议尺寸）中的最小值，flex-1 所在的元素并未指定宽度，因此 content-based minimun size（基于内容的最小尺寸）的值就是 content size suggestion（建议内容尺寸）。也就是说 flex-1 所在的元素的最小尺寸就是元素内容的尺寸。而导致 flex:1 的自适应效果在小于内容尺寸时失效。

简单来说就是 flex 项目是非滚动容器时最小尺寸是内容尺寸和 width 中的最小值，width 没有设置那么最小尺寸就是内容尺寸。

解决方案

min-width：0

通过 min-width 为 0 来设置 specified size suggestion（指定建议尺寸）

.flex-1 {
  flex: 1;
  min-width:0;
}

width ：0

由于 content-based minimun size（基于内容的最小尺寸）值是 content size suggestion（建议内容尺寸）和 specified size suggestion（指定建议尺寸）中的最小值。如果 specified size suggestion（指定建议尺寸）为 0，那么 content-based minimun size（基于内容的最小尺寸）也就为 0，从而使得 automatic Minimum Size（自动最小尺寸）也为 0。

根据 specified size suggestion（指定建议尺寸）的定义，width 为 0 就能设置 specified size suggestion（指定建议尺寸）值为 0

.flex-1 {
  flex: 1;
  width:0;
}

overflow:hidden

通过 overflow:hidden 创建 BFC（块级格式化上下文），BFC 就是一个隔离的独立容器，容器里的子元素不会影响到外面的元素，是里面的内容不会影响外面 flexbox 的布局。

.flex-1 {
  flex: 1;
  overflow:hidden;
}

-webkit-line-clamp

可以把块容器中的内容限制为指定的行数多出的部分显示显示省略号。

.notice{
  width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  word-break: break-all;
  overflow: hidden;
}