如何在space中均匀地在整个显示宽度上间隔三个代码块？

<div class="container">
  <pre class="code-block">要在网页的`<space>`元素中均匀地分布三个代码块，并确保它们在整个显示宽度上间隔开，可以使用CSS Flexbox布局来实现。以下是实现这一布局的方法：

### 基础概念
- **Flexbox**：CSS3中引入的一种布局模式，用于在一维空间内排列元素，非常适合创建响应式设计。

### 实现步骤
1. **HTML结构**：创建一个容器来包含三个代码块。
2. **CSS样式**：应用Flexbox属性来均匀分布这些代码块。

#### HTML示例
```html
<div class="container">
  <pre class="code-block"><code>代码块1</code></pre>
  <pre class="code-block"><code>代码块2</code></pre>
  <pre class="code-block"><code>代码块3</code></pre>
</div>

.container {
  display: flex;          /* 启用Flexbox布局 */
  justify-content: space-between; /* 在主轴上均匀分布子元素 */
  width: 100%;            /* 容器宽度占满父元素的宽度 */
}

.code-block {
  flex: 1;                /* 让每个代码块等宽 */
  margin: 0 10px;         /* 添加一些外边距以增加可读性 */
}