以便它可以与基于浮动的网格中的其他盒子排成一行，那么今天您可能会选择使用 Flexbox 来实现该布局。 使用浮动布局，您必须设置每个项目的大小 - 可能在您知道内容是什么之前。然后，您将把大东西塞进小容器中，而小东西则在它们周围留下很大的空间。 规则尺寸的盒子中的不规则尺寸的物品 浮动布局中的项目需要设置宽度（大预览） 但是，如果我们使用 Flexbox，我们可以让浏览器计算出为每个项目分配多少空间。Flexbox 将确保较大的东西分配更多的空间，而较小的东西分配更少的空间。这种柔软的尺寸意味着包含“awesome”一词的框将增大以包含该框，并且文本不会直接突出或与其他任何内容重叠。溢出问题解决；这种行为确实是 Flexbox 的设计目的。Flexbox 擅长处理一堆大小不均匀的内容并返回这些内容最有用的布局。

 盒子中的不规则尺寸物品的尺寸可充分利用空间 Flexbox 在项目之间分配空间 美国手机号码列表（大预览） 在 Flexbox 之外，可以告诉我们的盒子大小为内容所需的大小，仅此而已。如果使用流相关逻辑属性，则该min-content关键字可用作width或 的值。inline-size设置好width: min-content后，盒子就会变大，直到包含“awesome”这个词所需的大小： 请参阅Rachel Andrew的Pen Awesome 的最小内容。 避免数据丢失 # 框之所以会溢出（单词从框的边框中逃逸），是因为该overflow属性的默认值为visible。您可以（如果您愿意）以不同的方式管理溢出。例如，使用overflow: autooroverflow: scroll会给你的盒子滚动条。在这种情况下，这可能不是您想要的，但有些设计模式适合使用滚动框。 另一种可能性是决定您愿意使用 来裁剪溢出overflow: hidden。也许您可能认为隐藏溢出是更好的默认设置，但是，CSS 选择默认使溢出可见（而不是隐藏）这一事实是设计 CSS 核心价值的线索。在 CSS 中（就像在大多数地方一样），我们尽力避免数据丢失。

当我们谈论 CSS 中的数据丢失时，我们通常是在描述某些内容丢失。在 的情况下overflow: hidden，溢出的内容消失。这意味着我们无法到达那里以查看我们错过了什么。 在某些情况下，这可能是一个真正的问题。如果您设法创建的设计非常脆弱，以至于表单的按钮位于裁剪区域，则您的用户将无法完成表单。如果最后一段被删掉，我们永远不知道故事的结局！此外，事物消失的问题在于，它们的消失并不总是显而易见的。作为设计师，您可能不会发现问题，特别是如果它仅发生在响应式设计中的某些视口尺寸中。您的用户可能没有发现问题——他们只是没有看到号召性用语，或者认为这是他们的问题，他们无法下订单，所以就离开了。然而，如果事情杂乱地溢出，你往往会发现它。或者，更糟糕的是，使用该网站的人会发现它并通知您。