Html 使弹性项目采用内容宽度，而不是父容器的宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40141163/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make flex items take content width, not width of parent container
提问by Don P
I have a container <div>with display: flex. It has a child <a>.
我有一个<div>带有display: flex. 它有一个孩子<a>。
How can I make the child appear "inline"?
我怎样才能让孩子出现“内联”？
Specifically, how can I make the child's width determined by its content, and not expand to the width of the parent?
具体来说，如何让子的宽度由其内容决定，而不是扩展到父的宽度？
What I tried:
我试过的：
I set the child to display: inline-flex, but it still took up the full width. I also tried all other display properties, but nothing had an effect.
我将孩子设置为display: inline-flex，但它仍然占据了整个宽度。我还尝试了所有其他显示属性，但没有任何效果。
Example:
例子：
.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>回答by Michael Benjamin
Use align-items: flex-starton the container, or align-self: flex-starton the flex items.
使用align-items: flex-start的容器上，或align-self: flex-start在柔性的项目。
No need for display: inline-flex.
不需要display: inline-flex。
An initial setting of a flex container is align-items: stretch. This means that flex items will expand to cover the full length of the container along the cross axis.
flex 容器的初始设置是align-items: stretch. 这意味着 flex 项目将沿着交叉轴扩展以覆盖容器的整个长度。
The align-selfproperty does the same thing as align-items, except that align-selfapplies to flex itemswhile align-itemsapplies to the flex container.
该align-self属性的作用与 相同align-items，不同之处在于它align-self适用于flex 项目，而align-items适用于flex 容器。
By default, align-selfinherits the value of align-items.
默认情况下，align-self继承 的值align-items。
Since your container is flex-direction: column, the cross axis is horizontal, and align-items: stretchis expanding the child element's width as much as it can.
由于您的容器是flex-direction: column，横轴是水平的，并且align-items: stretch尽可能地扩展子元素的宽度。
You can override the default with align-items: flex-starton the container (which is inherited by all flex items) or align-self: flex-starton the item (which is confined to the single item).
您可以align-items: flex-start在容器上（由所有弹性项目继承）或align-self: flex-start在项目上（仅限于单个项目）覆盖默认值。
Learn more about flex alignment along the cross axishere:
在此处了解有关沿交叉轴的flex 对齐的更多信息：
Learn more about flex alignment along the main axishere:
在此处了解有关沿主轴的flex 对齐的更多信息：
回答by Temani Afif
In addtion to align-selfyou can also consider auto margin which will do almost the same thing
除此之外，align-self您还可以考虑自动保证金，这几乎可以做同样的事情
.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>