修改盒子的轴向使之从横向排列变为纵向排列

在HTML和CSS中，如果你想将元素从横向布局（默认的`display: block;`行为）变为纵向布局，你可以改变元素的`display`属性。通常情况下，为了创建列状布局，你可以设置元素的`display`属性为`flex`或者`grid`。

例如，如果你有一个`.container`类，其中包含一些`.box`元素：

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

你可以使用以下CSS来将其改为垂直方向排列：

.container {
  display: flex;
  flex-direction: column; /* 将默认的行方向变为列方向 */
}

.box {
  /* 其他样式 */
}

或者，如果想用网格系统（Grid）：

.container {
  display: grid;
  grid-template-columns: auto; /* 或者设定固定列宽等，这里设置为自动表示自动分配高度 */
  grid-auto-flow: column; /* 确保行流向是垂直的 */
}

.box {
  /* 其他样式 */
}

通过这样的修改，`.box`元素会按照纵轴堆叠起来，而不是并排显示。