我有一个容器<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
当前回答
Width: min-content也会产生相同的结果。 在IE11中不支持，如果这对你来说很重要:https://caniuse.com/mdn-css_properties_width_min-content
其他回答
在容器上使用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 >
