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

我有一个容器<div>与display: flex。它有一个子元素<a>。

我怎样才能使孩子出现“内联”?

具体来说，我怎样才能使子的宽度由其内容决定，而不扩展到父的宽度?

我尝试了什么:

我将子控件设置为display: inline-flex，但它仍然占用了全宽度。我还尝试了所有其他显示属性，但都没有效果。

例子:

.container { 背景:红色; 身高:200 px; flex-direction:列; 填充:10 px; 显示:flex; ｝一个{ 显示:inline-flex; 填充:10px 40px; 背景:粉色; ｝ < div class = "容器" > 测试< a href = " # " > < / > < / div >

http://codepen.io/donpinkus/pen/YGRxRY

当前回答

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

.container { 背景:红色; 身高:200 px; flex-direction:列; 填充:10 px; 显示:flex; ｝一个{ margin-right:汽车; 填充:10px 40px; 背景:粉色; ｝ < div class = "容器" > 测试< a href = " # " > < / > < / div >

2020-05-09 16:04:12

其他回答

在容器上使用align-items: flex-start，或在flex项上使用align-self: flex-start。

不需要显示:inline-flex。

flex容器的初始设置是align-items: stretch。这意味着伸缩项目将沿着交叉轴展开，覆盖整个容器的长度。

align-self属性的作用与align-items相同，只不过align-self应用于伸缩项，而align-items应用于伸缩容器。

默认情况下，align-self继承align-items的值。

因为你的容器是flex-direction: column，所以交叉轴是水平的，align-items: stretch是尽可能扩大子元素的宽度。(列设置也是display: inline-flex不能工作的原因。)

您可以在容器上使用align-items: flex-start(由所有伸缩项继承)或在项上使用align-self: flex-start(仅限于单个项)来覆盖默认值。

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

flex-wrap如何与align-self, align-items和align-content一起工作?

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