我有一个容器<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-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一起工作?

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

在CSS Flexbox中,为什么没有“justify-items”和“justify-self”属性?

其他回答

在容器上使用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一起工作?

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

在CSS Flexbox中,为什么没有“justify-items”和“justify-self”属性?

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

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

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