CSS中display为flex和inline-flex的区别

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 Flex 布局。

 

display: flex  将对象作为弹性伸缩盒显示

display: inline-flex  将对象作为内联块级弹性伸缩盒显示

flex

效果：

没有为父元素设置宽度，所以父元素的宽度为100%，而高度则是由子元素撑开，既高度自适应。

inline-flex

效果：

未给父元素设置宽高，但是父元素的宽高会跟根据子元素而自适应。