Flexbox 中为什么内容超出不会撑开容器？

在前端开发中，Flexbox 已经成为了一种非常流行的布局方式。它可以让开发者更加灵活地控制元素的位置和大小，特别是在移动端开发中，它的优势更加明显。

然而，在使用 Flexbox 进行布局的时候，我们会发现一个非常奇怪的现象：当某个元素的内容超出了容器的大小时，它并不会撑开容器，而是会溢出出去。这种情况可能会让初学者感到困惑，本文就来探讨一下这个问题。

为什么会出现这种情况？

为了更好地理解这个问题，我们先来回顾一下 Flexbox 的一些概念。在 Flexbox 中，容器（也就是父元素）和项目（也就是子元素）分别有以下一些属性：

容器的属性

• display
• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

项目的属性

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

其中，最关键的属性是 flex，它是 flex-grow、flex-shrink 和 flex-basis 三个属性的简写，用来改变项目的大小和位置。具体来说，flex-grow 控制项目的放大比例，flex-shrink 控制项目的缩小比例，flex-basis 控制项目的基准大小。在 Flexbox 中，所有项目的默认值为 flex: 0 1 auto，也就意味着它们不会自动放大，但会自动缩小，并且会以它们的本来大小为基准。

回到本文的主题，为什么内容超出不会撑开容器呢？这是因为默认情况下，Flexbox 中的容器并不会把溢出的内容考虑在内。例如，下面的代码中，容器 div.container 的高度为 200px，但它里面的项目 div.item 的高度却可能超过了 200px：

<div class="container">
  <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>

这时候，项目 div.item 的高度就会超出容器 div.container 的高度，并且不会撑开容器。这是因为默认情况下，flex-basis 属性的值为 auto，也就是会以项目本来的大小为基准。因此，即使内容超出了容器，项目的基准大小也不会改变。

如何解决这个问题？

针对这个问题，我们有两种通用的解决方案。

方案一：使用 overflow

一种最简单的解决方案是在容器中使用 overflow 属性，例如：

<div class="container" style="overflow: hidden;">
  <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>

在这个例子中，我们把容器的 overflow 属性设置为 hidden，这样当项目的高度超过容器时，容器就会把多余的部分隐藏起来。这种方法虽然简单，但也有一些限制，例如在多行文本的情况下，可能并不适用。

方案二：使用 min-height 和 flex-basis

我们可以在容器中使用 min-height 属性，来设置容器的最小高度。并且，我们也可以把项目的 flex-basis 设置为 min-height，来让项目的基准大小始终等于容器的最小高度。例如：

// javascriptcn.com 代码示例
<style>
  .container {
    display: flex;
    flex-direction: column;
    min-height: 200px;
  }
  .item {
    flex: 1 1 auto;
    flex-basis: min-height;
  }
</style>
<div class="container">
  <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>

在这个例子中，我们首先把容器的 min-height 设置为 200px，然后把项目的 flex-basis 设置为 min-height，这样当项目的高度超过容器时，容器的最小高度也会跟着增加，从而达到撑开容器的效果。

需要注意的是，这种方法需要设置容器的具体高度，否则会无法生效。并且，在使用这种方法时，我们也需要非常小心地使用 flex-basis 属性，以免影响其他的布局。因此，这种方法可能需要更加复杂的样式来支持。

总结

在使用 Flexbox 的时候，我们需要注意它默认情况下的一些属性，例如项目的 flex 属性以及容器的溢出处理方式。当我们遇到内容超出不会撑开容器的问题时，我们可以使用 overflow 或者 min-height 和 flex-basis 的组合来解决。在具体实现方案的时候，我们需要根据具体情况来灵活运用。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653b203a7d4982a6eb572288