使用display: flex使div的宽度等于内容的宽度。内联-flex不工作

使用display: flex可以创建一个弹性盒子，使其子元素能够按照一定的规则进行布局。当设置display: flex时，子元素的宽度默认会根据内容的宽度自动调整。

然而，当使用内联元素（如span）作为子元素，并将其设置为display: inline-flex时，子元素的宽度将不会自动调整为内容的宽度。这是因为内联元素默认具有shrink-to-fit的特性，即它们会根据内容自动收缩或扩展。

要解决这个问题，可以使用以下方法之一：

1. 将内联元素包裹在一个块级元素中，然后将块级元素设置为display: flex。这样，块级元素的宽度将自动调整为内容的宽度，从而实现子元素宽度等于内容宽度的效果。

<div style="display: flex;">
  <span>内容</span>
</div>

1. 将内联元素的包裹元素设置为display: inline-block，并将其宽度设置为auto。然后，将包裹元素设置为display: flex。这样，包裹元素的宽度将自动调整为内容的宽度，从而实现子元素宽度等于内容宽度的效果。

<span style="display: inline-block; width: auto;">
  <span>内容</span>
</span>

以上两种方法都可以实现使用display: flex使div的宽度等于内容的宽度，无需使用其他云计算品牌商的产品。