通过 flex-direction: column;可以改变flex布局的主轴方向。

HTML

<div class="box">
    <div>1</div>
    <div>2</div>
  </div>

CSS

 .box {
      width: 500px;
      height: 500px;
      background-color: pink;
      display: flex;
      /* 设置主轴的方向 */
      /* flex-direction: row; */
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .box div {
      width: 150px;
      height: 150px;
      background-color: skyblue;
    }

效果

改变主轴方向效果

最后修改：2022 年 09 月 09 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏