display: flex的五个盒子

display: flex属性用于创建一个flex容器，并指定其子元素（也称为flex项）的布局方式。下面是一个示例，展示了使用display: flex属性创建的五个盒子：

HTML代码：

<div class="container">
  <div class="box">盒子1</div>
  <div class="box">盒子2</div>
  <div class="box">盒子3</div>
  <div class="box">盒子4</div>
  <div class="box">盒子5</div>
</div>

CSS代码：

.container {
  display: flex;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 10px;
}

在上面的示例中，`.container`类被应用于包含五个盒子的父元素。通过设置`.container`的`display`属性为`flex`，我们创建了一个flex容器。

每个`.box`类都代表一个盒子，并具有相同的宽度、高度和边距。由于它们是`.container`的子元素，它们将按照flex布局方式进行排列。

注意：如果您想在网页中显示这些盒子，请将上述代码放置在HTML和CSS文件中，并在浏览器中打开该文件。