设为首页收藏本站
联系我们切换到宽版

 找回密码
 立即注册
金黑网络»首页 › 源码编程区 › 前端教程 › html5教程 › flex布局-修改主轴方向
返回列表 发新帖

flex布局-修改主轴方向

[复制链接]
admin 发表于 2025-5-20 08:42:08 | 显示全部楼层 |阅读模式
flex布局-修改主轴方向
1.jpg
1.png
  1. <title>flex布局-修改主轴方向</title>
  2.   <style>
  3.     .box {
  4.       display: flex;

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

  9.       /* 主轴在垂直，视觉效果：垂直居中 */
  10.       justify-content: center;

  12.       /* 侧轴在水平，视觉效果：水平居中 */
  13.       align-items: center;

  15.       width: 150px;
  16.       height: 120px;
  17.       background-color: pink;
  18.     }

  20.     img {
  21.       width: 32px;
  22.       height: 32px;
  23.     }
  24.   </style>
  25. </head>
  26. <body>
  27.   <div class="box">
  28.     <img src="./images/1.png" alt="">
  29.     <span>媒体</span>
  30.   </div>
  31. </body>
复制代码



回复

举报

返回列表 发新帖

QQ|网站地图|Archiver|手机版|金黑网络 ( 粤ICP备2021124338号 )

网站建设，微信公众号小程序制作，商城系统开发，高端系统定制，app软件开发，智能物联网开发，直播带货系统等

Powered by Www.Jinhei.Cn

Copyright © 2013-2024 深圳市金黑网络技术有限公司 版权所有

快速回复 返回顶部 返回列表