代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ padding: 0; margin: 0; box-sizing: border-box; } /* 轴默认是水平方向, 侧轴默认是垂直方向 */ /* 修改主轴方向属性: flex-direction:column; */ /* 此时主轴和侧轴方向对调 */ .box{ display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; width: 300px; height: 300px; border: 10px solid #000; font-size: 50px; font-weight: 700; margin: 200px auto; } img{ width: 100px; } </style> </head> <body> <div class="box"> <img src="./images/media.png" alt=""> <p>新闻</p> </div> </body> </html>
效果图:
移动web-flex布局-主轴换方向
最新推荐文章于 2024-09-13 23:28:46 发布
该代码示例展示了如何使用CSSFlexbox的`flex-direction:column`,`justify-content:space-evenly`和`align-items:center`属性创建一个垂直居中的布局,包含一个图像和文字‘新闻’。
摘要由CSDN通过智能技术生成