在本文中，我们将介绍 CSS 中 display:inline-flex 和 display:flex 的区别以及它们的用法和示例。display:inline-flex 和 display:flex 都用于创建弹性布局，但它们在元素的行为和布局上有一些不同之处。

阅读更多：CSS 教程

display:flex 是 CSS 中用于创建弹性布局的属性。通过将 display:flex 应用于父元素上，父元素的子元素将按照弹性布局的方式进行排列。这些子元素称为弹性容器，它们将根据父元素的大小自动调整自己的宽度和高度。

display:flex 的特点和用法如下： – 块级元素：display:flex 将父元素及其所有子元素都转化为块级元素，它们将一行显示，并根据需要自动换行。 – 主轴和交叉轴：display:flex 定义了主轴和交叉轴的方向。默认情况下，主轴是水平方向，交叉轴是垂直方向。 – 弹性容器属性：父元素的属性 flex-direction、justify-content、align-items 等用于控制子元素在主轴和交叉轴上的对齐方式、间距等。 – 子元素的排序：可以使用属性 order 来改变子元素的排列顺序。 – 子元素的伸缩：通过设置子元素的属性 flex-grow、flex-shrink 和 flex-basis 来定义子元素在弹性布局中的伸缩行为。

下面是一个简单的使用 display:flex 的代码示例：

上述代码中，.container 是弹性容器，.item 是弹性容器的子元素。display:flex 将 .container 设为弹性容器，justify-content: center 和 align-items: center 设置了子元素在主轴和交叉轴上的居中对齐。.item 通过 flex: 1 设置了在弹性布局中的伸缩行为。

display:inline-flex 是 display:flex 的一个变体，它将弹性容器作为一个行内元素来显示。与 display:flex 不同，display:inline-flex 不会将父元素及其所有子元素转换为块级元素，它们会像行内元素一样水平排列。

display:inline-flex 的特点和用法如下： – 行内元素：display:inline-flex 将父元素和子元素都作为行内元素来显示。它们将水平排列，并根据需要自动换行。 – 主轴和交叉轴：display:inline-flex 也定义了主轴和交叉轴的方向。默认情况下，主轴是水平方向，交叉轴是垂直方向。 – 弹性容器属性：与 display:flex 相同，父元素的属性 flex-direction、justify-content、align-items 等用于控制子元素在主轴和交叉轴上的对齐方式、间距等。 – 子元素的排序：与 display:flex 相同，可以使用属性 order 来改变子元素的排列顺序。 – 子元素的伸缩：与 display:flex 相同，通过设置子元素的属性 flex-grow、flex-shrink 和 flex-basis 来定义子元素在弹性布局中的伸缩行为。

下面是一个简单的使用 display:inline-flex 的代码示例：

上述代码中，.container 是弹性容器，.item 是弹性容器的子元素。display:inline-flex 将 .container 设为行内弹性容器，justify-content: center 和 align-items: center 设置了子元素在主轴和交叉轴上的居中对齐。.item 通过 flex: 1 设置了在弹性布局中的伸缩行为。

通过对比 display:flex 和 display:inline-flex 的区别，我们可以根据需要选择合适的属性来创建弹性布局。如果需要将弹性容器作为块级元素来显示，使用 display:flex；如果需要将弹性容器作为行内元素来显示，使用 display:inline-flex。