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

Question

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

如何让孩子出现“内联”？

具体来说，我怎样才能让孩子的宽度由它的内容决定，而不是扩大到父母的宽度？

我尝试了什么：

我将孩子设置为 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

原文由 Don P 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

不需要 display: inline-flex 。

---

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

The align-self property does the same thing as align-items , except that align-self applies to flex items while align-items applies to the flex container .

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

由于您的容器是 flex-direction: column ，因此横轴是水平的，并且 align-items: stretch 正在尽可能地扩展子元素的宽度。 （ column 设置也是 display: inline-flex 的原因。）

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

---

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

• flex-wrap 如何与 align-self、align-items 和 align-content 一起使用？

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

• 在 CSS Flexbox 中，为什么没有“justify-items”和“justify-self”属性？

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 4.0 许可协议