display: flex和display: inline-flex区别

应用场景

上面是一个动画编辑器的时间轴，现在需要让时间轴滚动到最右侧的时候，预留多余空间。代码结构如下

<div class="time-line">
  <div class="frames-list">
    <div class="frame-item">1</div>
    <div class="frame-item">2</div>
    <div class="frame-item">3</div>
    <div class="frame-item">4</div>
    <div class="frame-item">5</div>
    <div class="frame-item">6</div>
    <div class="frame-item">7</div>
    <div class="frame-item">8</div>
    <div class="frame-item">9</div>
    <div class="frame-item">10</div>
  </div>
</div>

.time-line {
  width: 800px;
  overflow-x: scroll;
}
.frames-list {
  display: flex;
  padding-right: 200px;
}

.frame-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  border: 1px solid black;
}

代码预览：codepen.io/moJiXiang/p…

一开始认为只要给div.frames-list一个padding-right: 200px就可以实现需求，但是通过控制台检查元素发现padding-right: 200px被作为元素的宽

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

display: flex;

如果没有设定宽高，可以看到容器像block一样占据了整行，也就是容器的宽等于父容器的宽度

如果有第二个弹性容器，它就会像 block 把第二个弹性容器移到下一行

display:inline-flex;

如果没有设定宽高，可以看到弹性容器像inline-block一样被子弹性项目的尺寸撑开

如果出现第二个弹性容器，会像 inline-block 和第二个弹性容器并排

结论

只有 display: inline-flex 将容器设置为内联块级伸缩盒，其宽度才会被子内容撑开，这时候设置padding-right: 200px; 才有效果