使宽度和灵活的物品一起玩得很好

简短回答： flex-shrink 和 flex-basis 属性很可能就是您在寻找的解决方案。

详细解答

假设您希望将图像和文本像这样并排排列：

现在，假设您使用 Flexbox 来实现这一点。将父元素设置为 display: flex; 是一个良好的开端。

<code>.container { 
  display: flex; 
}</code>

结果是……

糟糕！好吧，我想这还可以接受。图像紧贴文本是有道理的，因为我们没有设置图像的宽度。理想情况下，我们希望图像具有固定宽度，然后文本占据剩余空间。

好的，让我们来做吧！

<code>.container { 
  display: flex; 
}

img { 
  width: 50px;
  margin-right: 20px; 
}</code>

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

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

<code>img {
  min-width: 50px;
  margin-right: 20px;
}</code>

但是，这只会帮助设置宽度，所以我们也必须添加一个 margin。

<code>img {
  min-width: 50px;
  margin-right: 20px;
}</code>

就是这样。在 Firefox 中更好，并且在 Chrome 中仍然有效。

更详细的解答

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

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

<code>.container { 
  display: flex; 
}

img {
  width: 50px;
  margin-right: 20px;
  flex-shrink: 0;
}</code>

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

最终解答

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

<code>flex: none | [  ? ||  ]</code>

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

<code>.container { 
  display: flex; 
}

img {
  flex: 0 0 50px;
  margin-right: 20px;
}</code>

哦，耶：

另一个例子

flex-shrink 属性解决了大量其他问题，如果您想开始使用 Flexbox，它非常重要。这是另一个例子说明为什么：我偶然发现了另一个类似于上述的问题，我在最近一期的通讯中提到了它。我正在构建一个导航组件，允许用户左右滚动多个项目。在检查我的工作时，我注意到以下问题：

较长的导航项目不应该像那样换行——但我最终明白了为什么会发生这种情况，这要感谢之前的问题。如果将 flex-shrink 属性设置为 0，它将告诉此导航中的每个项目不要收缩，而是采用内容的宽度，如下所示：

是的，我们可以再次采取额外的步骤来使用 flex 属性，这次使用 auto 作为 flex-basis，因为我们希望在分配导航容器中的空间时考虑所有项目尽可能多的空间。

万岁！我们解决了。尽管答案只是一行代码，但它对于创建真正灵活的元素至关重要。

以上是使宽度和灵活的物品一起玩得很好的详细内容。更多信息请关注PHP中文网其他相关文章！