如何使用flexbox创建具有完美页边距的2x2网格？

使用flexbox创建具有完美页边距的2x2网格可以通过以下步骤实现：

1. 创建HTML结构：首先，在HTML中创建一个包含4个子元素的父容器，每个子元素代表网格的一个单元格。

<div class="grid-container">
  <div class="grid-item">单元格1</div>
  <div class="grid-item">单元格2</div>
  <div class="grid-item">单元格3</div>
  <div class="grid-item">单元格4</div>
</div>

1. 设置CSS样式：使用flexbox布局来创建网格，并设置适当的页边距。

.grid-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: -10px;
}

.grid-item {
  flex-basis: calc(50% - 20px);
  margin: 10px;
}

在上述CSS样式中，.grid-container是父容器的类名，.grid-item是子元素的类名。display: flex;将父容器设置为flex布局，flex-wrap: wrap;使子元素在一行放不下时换行，justify-content: space-between;将子元素在父容器中水平分布，并且两侧留有空白间距。margin: -10px;用于抵消默认的子元素间距，flex-basis: calc(50% - 20px);设置子元素的宽度为50%，并减去页边距的宽度。

1. 添加样式和内容：根据需要，为每个单元格添加样式和内容。

.grid-item {
  background-color: #f2f2f2;
  padding: 20px;
  text-align: center;
}

.grid-item:nth-child(odd) {
  background-color: #e0e0e0;
}

在上述CSS样式中，.grid-item的背景颜色设置为灰色，内边距设置为20px，居中对齐文本。.grid-item:nth-child(odd)选择奇数位置的单元格，并将其背景颜色设置为浅灰色。

这样，就可以使用flexbox创建具有完美页边距的2x2网格了。根据实际需求，可以进一步调整样式和内容。