使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.这意味着柔性物品将展开以覆盖沿横轴的容器的整个长度.

该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项目(仅限于单个项目)的默认值.

在此处了解有关沿交叉轴的柔性对齐的更多信息:

• flex-wrap如何使用align-self,align-items和align-content？

了解有关沿主轴的柔性对齐的更多信息:

• 在CSS Flexbox中,为什么没有"justify-items"和"justify-self"属性？

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>