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

lyelyelye 2019-06-29

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

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

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

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

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

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

相关推荐

囧芝麻 / 0评论 2019-12-20