如何防止 Flex 项目拉伸到容器宽度？

如何强制 Flex 项目适应内容，而不是容器宽度

在 Flex 布局中，元素自然拉伸以填充其父元素的宽度容器。当您希望子元素仅包装其内容时，这可能是不可取的。以下是如何强制执行此行为：

使用align-items/align-self的解决方案

在容器上设置align-items: flex-start，或align-self ：弹性项目上的弹性启动。这会覆盖默认的align-items：stretch，当flex-direction为column时，这会导致项目展开以填充容器的水平空间。

工作原理

通过设置align-items: flex-start，您可以强制项目将自身与容器的起始边缘对齐。由于设置了列方向，因此起始边缘是左边缘。这会强制项目保持与其内容一样宽。

示例：

.container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
a {
  padding: 10px 40px;
  background: pink;
}

相关概念

• 交叉轴： 垂直于主布局的轴axis（在列布局中水平排列）。
• align-items: 沿交叉轴对齐弹性项目。
• align-self: 类似于对齐项目，但特定于各个弹性项目。

以上是如何防止 Flex 项目拉伸到容器宽度？的详细内容。更多信息请关注PHP中文网其他相关文章！