找回密码
 立即注册

flex布局-修改主轴方向 [复制链接]

admin 2025-5-20 08:42:08 177
flex布局-修改主轴方向
1.jpg
1.png
  1. <title>flex布局-修改主轴方向</title>
  2.   <style>
  3.     .box {
  4.       display: flex;
  5.       /* 修改主轴方向 垂直方向;侧轴自动变换到水平方向 */
  6.       flex-direction: column;
  7.       /* 主轴在垂直,视觉效果:垂直居中 */
  8.       justify-content: center;
  9.       /* 侧轴在水平,视觉效果:水平居中 */
  10.       align-items: center;
  11.       width: 150px;
  12.       height: 120px;
  13.       background-color: pink;
  14.     }
  15.     img {
  16.       width: 32px;
  17.       height: 32px;
  18.     }
  19.   </style>
  20. </head>
  21. <body>
  22.   <div class="box">
  23.     <img src="./images/1.png" alt="">
  24.     <span>媒体</span>
  25.   </div>
  26. </body>
复制代码



随机推荐

0 回复

发布新话题
搜索
返回顶部