CSS中flex和inline-flex的区别
起因
display:flex\inline-flex是CSS中弹性布局时，用于容器元素的样式选项。
让人有些糊涂，两者的区别时什么。网上看了一些文章都在扯什么宽度之类的，完全就是胡扯。
还有的写什么“将对象作为弹性伸缩盒显示” “将对象作为内联块级弹性伸缩盒显示”跟绕口令似的。
结论
display:flex和display:inline-flex的共同点是：启用弹性布局。
display:flex和display:inline-flex的区别就是：display:flex容器是一个一般块级元素；display:inline-flex容器则是一个行内块元素。
至于宽高之类的，完全就是块级元素和行内块元素的区别了，一并列一下。
- 块级元素不写宽，默认宽度占满父容器宽度100%
- 块级元素不写高，默认高度靠内容撑起来
- 行内元素设置宽高无效。它的宽高靠内容撑起
- 自带宽高属性的元素，设置宽高有效（img,table）
测试代码
<!DOCTYPE html>
<html>
<head>
<style>
.container{
display:flex;
background-color: blue;
}
.inline-flex-container{
display:inline-flex;
background-color: gray;
height: 200px;
}
.item{
background-color: green;
width:100px;
height:100px;
}
</style>
</head>
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<span>test1</span>
<br><hr>
<div class="inline-flex-container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<span>test2</span>
</body>
</html>
效果如下
基于上面的测试效果和结论解释就是，当使用display:inline-flex容器被设置为行内块元素，而行内块元素同时兼具了行内元素和块级元素的特性。
综合起来就是：设置宽高有效；如果不设置宽高，宽高靠内容撑起；内容不独占一行。
