行列对齐问题

使用CSS的Flexbox属性进行行列对齐，例如：

HTML代码：

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

CSS代码：

.container {
  display: flex;
  justify-content: space-between; /* 对齐方式为左右对齐 */
  align-items: center; /* 对齐方式为垂直居中 */
}

.item {
  width: 100px;
  height: 100px;
  background-color: gray;
  color: white;
  text-align: center;
  line-height: 100px;
}

在上述代码中，通过设置display为flex，容器内会自动将子元素进行布局对齐。水平方向上采用了justify-content: space-between属性设置左右对齐，垂直方向上采用了align-items: center属性设置垂直居中对齐。

运行结果：