使flex项目占用内容宽度，而不是父容器的宽度

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

Answer 1

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

无需display: inline-flex。

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

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

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

的值

由于您的容器为flex-direction: column，因此横轴是水平的，align-items: stretch正在尽可能多地扩展子元素的宽度。

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

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

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

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

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

Answer 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>