近日，在做css文字和图片布局时，使用flex,如果左则的文字长度小，跟定义的div宽度小很多时，左边会有一段距离，使用flex时也使用了 flex-direction: row-reverse; justify-content: space-between; 来表示方向和左右对齐。但左边还是莫名奇妙的出现一段距离。后来在使用 display: inline-flex; 时，左边的距离是没有了，但是右边的却又出现了。真是没搞明白。搜索了一下发现。

css布局flex和inline-flex的区别是什么

flex： 将对象作为弹性伸缩盒显示。

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

一句话描述：当Flex Box 容器没有设置宽度大小限制时，当display 指定为 flex 时，FlexBox 的宽度会填充父容器，当display指定为 inline-flex 时，FlexBox的宽度会包裹子Item。

用其它的标签理解为 flex 类似 div，inline-flex类似span。一个是占用全宽度，一个是按内容占用宽度。