有时候我们使用了display: flex属性后，子元素横向排列，你可能会发现如下图现象：
父级元素不设置宽度，背景宽度默认100%，如果这时想让父级元素随着子元素宽度自适应，怎么处理？
接下来，上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.wrap {
display: flex;
background: red;
border: 2px solid #000;
}
.wrap1 {
display: inline-flex;
background: red;
border: 2px solid #000;
margin-top: 40px;
}
.item {
width: 100px;
height: 100px;
background: blue;
border: 2px solid #000;
}
</style>
</head>
<body>
<div id="app">
<div class="wrap">
<div class="item"></div>
<div class="item"></div>
</div>
<div class="wrap1">
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</body>
</html>
运行结果如下图：
得出结论如下：
使用了display: flex 属性后，父元素不设置宽度，宽度就是100%；不会被子元素宽度撑开；
使用了display: inline-flex 属性后，父元素不设置宽度，宽度就是所有的子元素宽度之和，会被子元素宽度撑开，实现宽度自适应；