使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项目（仅限于单个项目）的默认值。