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

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

inline-flex和flex的区别很简单，除了inline-flex能够让容器根据子元素内容的宽高自适应容器的宽度外，其余和flex几乎如出一辙。

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

下面就提一下使用场景，我想作一个点赞的组件，由一个图标和一个数字组成，因为数字是不断变化的，10和9999的宽度显然不同，因此基于这种状况，能够给两种解决方案：

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

因此究竟使用哪一种解决方案仍是根据你们的项目业务本身决定吧！