flex-direction修改主轴方向的作用

.box {
      display: flex;
      width: 150px;
      height: 120px;
      background-color: pink;
    }

    img {
      width: 32px;
      height: 32px;
    }

  </style>
</head>

  <div class="box">
    <img src="./images/1.png" alt="转存失败，建议直接上传图片文件">
    <span>媒体</span>
  </div>

设置flex, img span沿着主轴方向排列

.box {
     display: flex;

     /* 修改主轴方向 垂直方向；侧轴自动变换到水平方向 */
     flex-direction: column; 

     width: 150px;
     height: 120px;
     background-color: pink;
   }   

修改主轴方向, img span沿着新主轴(原侧轴)排列

.box {
      display: flex;

      /* 修改主轴方向 垂直方向；侧轴自动变换到水平方向 */
      flex-direction: column;

      /* 修改后,主轴在垂直，视觉效果：垂直居中 */
      justify-content: center; 

      /* 修改后,侧轴在水平，视觉效果：水平居中 */
      align-items: center;

      width: 150px;
      height: 120px;
      background-color: pink;
    }   

设置水平垂直居中

---

修改主轴方向属性: flex-direction

属性值	作用
row	行, 水平(默认值)
column	*列, 垂直
row-reverse	行, 从右向左
column-reverse	列, 从下向上