让宽度 width 和 flex 弹性元素完美结合

简短的回答： flex-shrink 与 flex-basis 可能是你正在寻找的。

长答案

假设您想将图像和一些文本对齐，如下所示：

文本块左侧的黄色插图鸟的小图像。
现在假设您使用 flexbox 来实现它。将父元素设置为 display: flex; 是一个好的开始。

.container { 
  display: flex; 
}

哎呀！嗯，我想这还不错。因为我们没有在图像上设置宽度，所以图像会像这样与文本碰撞是有道理的。但是，理想情况下，我们希望该图像具有固定宽度，然后文本应该占据剩余的空间。

好的，让我们去做吧！

.container { 
  display: flex; 
}

img { 
  width: 50px;
  margin-right: 20px; 
}

这在 Chrome 中看起来很棒。但是等等，什么？如果我们在 Firefox DevTools 中检查图像标签，我们会发现它根本不是我们设置的宽度值：

我们可以使用 min-width 将图像强制为我们想要的 50px 宽度：

img {
  min-width: 50px;
  margin-right: 20px;
}

但~但是，只有设置有助于宽度，所以我们也必须设置一个边距。

img {
  min-width: 50px;
  margin-right: 20px;
}

我们去吧。这在 Firefox 中更好，并且在 Chrome 中仍然有效。

我意识到图像正在被压扁，因为我们需要使用 flex-shrink 属性来告诉 flex 项目不要减小大小，无论它们是否有宽度。

所有弹性项目的 flex-shrink 值为1. 我们需要将图像元素设置为0：

.container { 
  display: flex; 
}

img {
  width: 50px;
  margin-right: 20px;
  flex-shrink: 0;
}

示例 https://codepen.io/robinrendle/pen/MdNqGm
越来越好！但是我们仍然可以做更多的事情来改善这一点。

我们可以进一步整理，因为 flex-shrink 它包含在flex速记属性中。

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

如果我们将值 flex-shrink 设置为0, flex-basis 设置为我们希望图像的默认宽度，那么我们可以完全摆脱该属性。

.container { 
  display: flex; 
}

img {
  flex: 0 0 50px;
  margin-right: 20px;
}

哦耶：

这个flex-shrink属性解决了很多其他问题，如果你想开始使用 flexbox，这个属性非常重要。这是另一个例子：我偶然发现了另一个类似上面的问题，我在最近一期的时事通讯中提到了它。我正在构建一个导航组件，它可以让用户左右滚动浏览多个项目。检查我的工作时，我注意到以下问题：

那个较长的导航项不应该像那样分成多行——但由于上一期，我终于明白了为什么会发生这种情况。如果将 flex-shrink 属性设置为 0 ，它将告诉此导航中的每个项目不要缩小，而是假设内容的宽度，如下所示：

而且，是的，我们可以再次执行额外的步骤来使用该 flex 属性，这次使用 auto 来作为 flex-basis 的值，因为我们希望在分配导航容器中的空间时考虑所有项目的最大空间量。

flex: 0 0 auto;

嘘！我们想通了。尽管答案是一行代码，但它对于制作真正弹性元素是非常重要的。