使用inline-flex让容器自适应宽度

想必flex大家都不陌生，但是你知道还有一种布局叫inline-flex吗？

inline-flex和flex的区别很简单，除了inline-flex可以让容器根据子元素内容的宽高自适应容器的宽度外，其他和flex几乎一模一样。

flex默认使容器占据一整行宽度，高度根据子元素自适应。
inline-flex宽高均由子元素自适应，特别适合做一些根据内容而不断增宽的组件。

下面就提一下使用场景，我想做一个点赞的组件，由一个图标和一个数字组成，由于数字是不断变化的，10和9999的宽度显然不一样，所以基于这种情况，可以给两种解决方案：

1. 给容器一个固定宽度，但这也降低了组件的通用性。
2. 让容器display: inline-flex，让宽度根据数字大小自适应，这样做也有一个缺点，在容器宽度发生变化的时候，会发生闪烁。

所以究竟使用哪种解决方案还是根据大家的项目业务自己决定吧！