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

我有一个容器<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

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

不需要display: inline-flex。

flex容器的初始设置为align-items: stretch。这意味着柔性物品将沿横轴扩展以覆盖容器的整个长度。

该align-self属性的作用与之相同align-items，除了align-self适用于flex项而align-items适用于flex容器。

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

由于您的容器为flex-direction: column，因此交叉轴为水平，并且align-items: stretch正在最大程度地扩展子元素的宽度。

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

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

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

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

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

此外，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>