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

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>

Answer 1

使用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在项目（仅限于单个项目）上覆盖默认值。