使伸缩项目采用内容宽度，而不是父容器宽度

我有一个容器<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>

< a href = " http://codepen。io / donpinkus /钢笔/ YGRxRY noreferrer“rel = > http://codepen.io/donpinkus/pen/YGRxRY < / >

262849 次浏览
小开
最佳答案

在容器上使用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正在尽可能地扩展子元素的宽度。(column设置也是display: inline-flex不能工作的原因。)

你可以用容器上的align-items: flex-start(它被所有伸缩项继承)或项目上的align-self: flex-start(它仅限于单个项目)覆盖默认值。

在这里了解更多关于十字轴的伸缩对齐:

在这里了解更多关于主轴的伸缩对齐:

小开

除了align-self，你还可以考虑auto margin，它会做几乎相同的事情

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

小开

width: min-content也产生相同的结果。 在IE11中不支持，如果这对你来说很重要:https://caniuse.com/mdn-css_properties_width_min-content


提交答案