使弹性项目采用内容宽度，而不是父容器的宽度答案

【问题标题】：Make flex items take content width, not width of parent container使弹性项目采用内容宽度，而不是父容器的宽度
【发布时间】：2026-01-10 03:00:01
【问题描述】：

我有一个容器 <div> 和 display: flex。它有一个孩子<a>。

我怎样才能让孩子看起来“内联”？

具体来说，如何让child的宽度由它的内容决定，而不是扩大到parent的宽度？

我尝试了什么：

我将孩子设置为display: inline-flex，但它仍然占据了整个宽度。我还尝试了所有其他显示属性，但没有任何效果。

示例：

.container {
  background: red;
  height: 200px;
  flex-direction: column;
  padding: 10px;
  display: flex;
}
a {
  display: inline-flex;
  padding: 10px 40px;
  background: pink;
}

<div class="container">
  <a href="#">Test</a>
</div>

http://codepen.io/donpinkus/pen/YGRxRY

【问题讨论】：

标签： html css flexbox

【解决方案1】：

在容器上使用align-items: flex-start，或在弹性项目上使用align-self: flex-start。

不需要display: inline-flex。

弹性容器的初始设置是align-items: stretch。这意味着 flex 项目将扩展到沿横轴覆盖容器的整个长度。

align-self 属性与align-items 的作用相同，只是align-self 适用于弹性项目，而align-items 适用于弹性容器。

默认情况下，align-self 继承 align-items 的值。

由于你的容器是flex-direction: column，所以横轴是水平的，align-items: stretch 正在尽可能地扩大子元素的宽度。

您可以使用容器上的align-items: flex-start（由所有弹性项目继承）或项目上的align-self: flex-start（仅限于单个项目）覆盖默认值。

在此处了解有关沿交叉轴的 flex 对齐的更多信息：

How does flex-wrap work with align-self, align-items and align-content?

在此处了解有关沿主轴的 flex 对齐的更多信息：

In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

【讨论】：

感谢您的详尽解释。使用 flex 有一段时间了，但是有很多细节很容易漏掉。
由于某种原因在这里不起作用：jsfiddle.net/b8zd37st

【解决方案2】：

除了align-self，您还可以考虑自动边距，它几乎可以做同样的事情

.container {
  background: red;
  height: 200px;
  flex-direction: column;
  padding: 10px;
  display: flex;
}
a {
  margin-right:auto;
  padding: 10px 40px;
  background: pink;
}

<div class="container">
  <a href="#">Test</a>
</div>

【讨论】：