使用flex实现一个匡字形的布局程序

使用flexbox可以很方便地实现匡字形的布局。下面是一个使用flexbox实现匡字形布局的示例代码：

HTML部分：

<div class="container">
  <div class="row">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="row">
    <div class="box"></div>
    <div class="box center"></div>
    <div class="box"></div>
  </div>
  <div class="row">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

CSS部分：

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.row {
  display: flex;
}

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

.center {
  background-color: #f00;
}

上述代码中，使用了flexbox布局来实现匡字形的效果。通过设置`.container`为flex容器，并设置`flex-direction: column`使得子元素按垂直方向排列。然后使用`justify-content: center`和`align-items: center`将子元素在容器中居中对齐。

`.row`类表示每一行，使用`display: flex`使得子元素按水平方向排列。

`.box`类表示每个方块，设置了固定的宽度和高度，并设置了一些样式。

在上述示例中，中间的方块使用了`.center`类来设置不同的背景颜色，以突出显示。