使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-self: flex-start 配置可以自适应内容

Answer 2

使用align-items: flex-start的容器上，或align-self: flex-start在柔性的项目。没必要display: inline-flex。Flex容器的初始设置是align-items: stretch。这意味着柔性物品将展开以覆盖沿横轴的容器的整个长度。该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项目（仅限于单个项目）的默认值。