我有一个带有 display: flex 的容器 <div>。它有一个子 <a>。
如何让孩子出现“内联”？
具体来说，我怎样才能让孩子的宽度由它的内容决定，而不是扩大到父母的宽度？
我尝试了什么：
我将孩子设置为 display: inline-flex，但它仍然占据了整个宽度。我还尝试了所有其他显示属性，但没有任何效果。
例子：
.container { 背景：红色；高度：200px；弹性方向：列；填充：10px；显示：弯曲； } a { 显示：内联弹性；填充：10px 40px；背景：粉红色； }
在容器上使用 align-items: flex-start，或在弹性项目上使用 align-self: flex-start。
不需要 display: inline-flex。
弹性容器的初始设置是 align-items: stretch。这意味着弹性项目将沿着横轴扩展以覆盖容器的整个长度。
align-self 属性的作用与 align-items 相同，只是 align-self 适用于 flex 项，而 align-items 适用于 flex 容器。
默认情况下，align-self 继承 align-items 的值。
由于您的容器是 flex-direction: column，因此横轴是水平的，并且 align-items: stretch 正在尽可能多地扩展子元素的宽度。
您可以使用容器上的 align-items: flex-start（由所有弹性项目继承）或项目（仅限于单个项目）上的 align-self: flex-start 覆盖默认值。
在此处了解有关沿交叉轴的 flex 对齐的更多信息：
flex-wrap 如何与 align-self、align-items 和 align-content 一起使用？
在此处了解有关沿主轴的 flex 对齐的更多信息：
在 CSS Flexbox 中，为什么没有“justify-items”和“justify-self”属性？
除了align-self，您还可以考虑自动边距，它几乎可以做同样的事情
.container { 背景：红色；高度：200px；弹性方向：列；填充：10px；显示：弯曲； } a { 边距右：自动；填充：10px 40px；背景：粉红色； }
width: min-content 也产生相同的结果。如果这对您很重要，则在 IE11 中不受支持：https://caniuse.com/mdn-css_properties_width_min-content
