让宽度和弹性项目和谐共处 | CSS-Tricks

简短答案：flex-shrink 和 flex-basis 可能正是您要找的。

假设您想像这样将图像和一些文本并排对齐

现在假设您想要使用弹性盒子来实现。将父元素设置为 display: flex; 是一个好的开始。

.container { 
  display: flex; 
}

结果是…

查看示例
弹性收缩示例 1 由 Robin Rendle 创建 (@robinrendle)
在 CodePen 上。

糟糕！嗯，我认为还算可以吧。图像紧挨着文本是有道理的，因为我们还没有为图像设置 width。理想情况下，我们希望图像具有固定宽度，然后文本应该占据剩余的空间。

好的，我们来做一下吧！

.container { 
  display: flex; 
}

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

查看示例
弹性收缩示例 2 由 Robin Rendle 创建 (@robinrendle)
在 CodePen 上。

这在 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-shrink 值为 1。我们需要将图像元素设置为 0

.container { 
  display: flex; 
}

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

查看示例
弹性收缩示例 3 由 Robin Rendle 创建 (@robinrendle)
在 CodePen 上。

越来越好了！但是我们仍然可以做更多来改进它。

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

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

如果我们将 flex-shrink 值设置为 0，并将 flex-basis 值设置为我们想要图像的默认宽度，那么我们可以完全删除 width 属性。

.container { 
  display: flex; 
}

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

太棒了

查看示例
弹性收缩示例 2 由 Geoff Graham 创建 (@geoffgraham)
在 CodePen 上。

flex-shrink 属性解决了大量其他问题，并且如果您想开始使用弹性盒子，它非常重要。以下是另一个例子：我在最近一期的时事通讯中提到了另一个类似上述问题的问题。我正在构建一个导航组件，允许用户左右滚动浏览多个项目。在检查我的作品时，我注意到了以下问题

查看示例
flex-shrink 导航项目 1 由 Robin Rendle 创建 (@robinrendle)
在 CodePen 上。

那个更长的导航项目不应该那样分成多行——但我终于明白了为什么会出现这种情况，这要归功于之前的问题。如果您将 flex-shrink 属性设置为 0，那么它将告诉此导航中的每个项目不要收缩，而是假设内容的宽度，就像这样

查看示例
flex-shrink 导航项目由 Robin Rendle 创建 (@robinrendle)
在 CodePen 上。

当然，我们可以再次进行额外的一步，使用 flex 属性，这次使用 auto 作为 flex-basis，因为我们希望在分配导航容器中的空间时，考虑所有项目的最大空间。

太棒了！我们解决了问题。即使答案只是一行代码，但对于创建真正灵活的元素来说，它也是至关重要的代码。