CSS 中的 inline-flex 和 inline-block 有什么区别？

在 CSS 中，display 属性被用来定义一个元素应该被如何显示。其中，display: inline-flex 和 display: inline-block 都是常用的值。这两种属性看起来很相似，但实际上有一些关键的区别。

inline-flex

inline-flex 会将元素的尺寸压缩到它包含内容的最小宽度。在这个最小宽度中，元素内的内容被用作 flex 容器的子元素，可以改变它们的宽度和顺序。同时，inline-flex 的元素可以在同一行上与其它元素共存。

.example {
  display: inline-flex;
}

inline-block

inline-block 与 inline-flex 相比较类似，但它不会对内容进行改变、拒绝包裹及增加子元素。

.example {
  display: inline-block;
}

主要区别

主要的区别在于它们如何处理元素的宽度。在 inline-flex 中，元素可以让其内部元素改变宽度、布局并进行修改。而 inline-block 不会有这样的效果，它仅仅将元素压缩成为一个矩形块。

此外，inline-flex 的内部有多个元素，它们可以在 flex 容器中通过改变宽度的方式进行布局。而 inline-block 中，元素内部的元素布局是静态的。

结论

总的来说，如果你需要一个可以进行 flex 布局的元素，你应该选择 inline-flex。而如果你只需要让一个元素水平放置在与其他元素中相同的行，则使用 inline-block。这两个属性都有其独到的用处，在具体场景中应当进行谨慎选择。

参考链接：

• CSS Tricks