同时使用 display inline 和 display flex

在开发过程中，我们有时需要同时使用 display: inline 和 display: flex 进行布局。本篇介绍如何正确使用这两个属性来实现布局和样式上的需求。

1. inline 和 block 元素

首先，我们需要了解 display: inline 和 display: block 两个最基本的属性。其中，inline 属性是将元素设置为行内元素，使其与其他行内元素在一行显示；block 属性则是将元素设置为块级元素，使其独占一行。

.inline {
  display: inline;
  border: 1px solid red;
  padding: 10px;
}
.block {
  display: block;
  border: 1px solid blue;
  padding: 10px;
}

<span class="inline">Inline</span>
<span class="inline">Inline</span>

<div class="block">Block</div>
<div class="block">Block</div>

以上代码的效果如下图所示：

2. flex 属性

display: flex 是 CSS3 新增的属性，用于设置一个容器为弹性容器，并且容器内的元素变为弹性项目，可以通过设置不同的属性来调整弹性项目的排列方式、对齐方式等。

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 1px solid green;
}

.flex-item {
  margin: 10px;
  width: 100px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

以上代码的效果如下图所示：

3. 同时使用 inline 和 flex

有时候，我们需要将多个弹性项目并排显示，这时就需要同时使用 display: inline 和 display: flex 了。

.flex-container {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 1px solid green;
}

.flex-item {
  margin: 10px;
  width: 100px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

以上代码的效果如下图所示：

4. 小结

在实际开发中，同时使用 display: inline 和 display: flex 可以实现很多有趣的布局，灵活运用这两个属性可以使网页布局更加生动、多变。但是需要特别注意的是，这两个属性是互斥的，在一个元素上同时使用时，display: flex 会覆盖 display: inline。因此，在使用时需要根据具体情况进行调整和取舍。