使用inline-flex讓容器自適應寬度

想必flex你們都不陌生，可是你知道還有一種佈局叫inline-flex嗎？

inline-flex和flex的區別很簡單，除了inline-flex能夠讓容器根據子元素內容的寬高自適應容器的寬度外，其餘和flex幾乎如出一轍。

flex默認使容器佔據一整行寬度，高度根據子元素自適應。
inline-flex寬高均由子元素自適應，特別適合作一些根據內容而不斷增寬的組件。

下面就提一下使用場景，我想作一個點讚的組件，由一個圖標和一個數字組成，因爲數字是不斷變化的，10和9999的寬度顯然不同，因此基於這種狀況，能夠給兩種解決方案：

1.給容器一個固定寬度，但這也下降了組件的通用性。
2.讓容器display: inline-flex，讓寬度根據數字大小自適應，這樣作也有一個缺點，在容器寬度發生變化的時候，會發生閃爍。

因此究竟使用哪一種解決方案仍是根據你們的項目業務本身決定吧！