display 属性指定元素在网页中的显示方式。 CSS 中与此属性相关的值可以有很多。 Inline-block 和 inline-flex 是两个这样的属性。虽然这个属性可以有几个值，但为了理解上述内容，让我们首先看看其他三个值：inline、block、flex。
- 内联：顾名思义，内联将元素显示在与其他元素相同的行中。指定任何高度和宽度属性都没有用，因为它遵循线条的高度和宽度，它是线条的一部分。
- 块：将元素显示为块元素。它从一个新行开始，并尽可能多地占据水平空间。块级元素不会出现在同一行中，而是打破现有行并出现在下一行。
- Flex： Flex 将元素显示为灵活的结构。要使用弹性显示，必须创建一个弹性级别容器。 Flex 级别的容器什么都不是，而是一个将 display 属性设置为 flex 的元素。 flex 容器本身显示在一个新行中，就像块元素一样。 flex 容器可以包含其他元素，因此，flex 容器是父元素，属于它的元素是子元素。 Display flex 属性帮助我们在容器中的项目之间对齐和分配空间，即使它们的大小未知和/或动态。
Inline-Block：将元素显示为内联级块容器。设置为 inline-block 的元素与 inline 非常相似，因为它将按照文本的自然流进行设置，即；与 display: block 不同，display:inline-block 不会在元素后添加换行符。因此，该元素可以与其他元素相邻。元素本身被格式化为内联元素，但它允许您在元素上设置宽度和高度，这在display: inline 中是不可能的。
例子：
CSS inline-block
GeeksforGeeks
A Online
Computer
Science
Portal
for Geeks
输出： 
Inline-flex：将元素显示为内联级 flex 容器。 display:inline-flex不会使 flex 项目内联显示。它使 flex 容器内联显示。 display: flex 和 display: inline-flex 之间的主要区别在于 display: inline-flex 将使 flex 容器成为内联元素，而其内容保持其 flexbox 属性。在下图中，flex 容器包括 Computer、Science、Portal 和黄色区域。
例子：
CSS inline-block
GeeksforGeeks
A Online
Computer
Science
Portal
for Geeks
输出： 
inline-block和inline-flex之间只有一个主要区别：
inline-block：在它的部分下为每个元素创建特定的块，维护每个元素的结构。
inline-flex：不以正常形式保留任何特定空间。