Flex布局
一种非常方便的布局方式。 在容器中记住4个样式display: flex; flex布局 flex-direction: row; 规定主轴的方向:row/column justify-content: space-around; 元素在主轴方向上的排列方式:flex-start/flex- end/space-around/space-between align-items: center; 元素在副轴方向上的排列方式:flex-start/flex- end/space-around/space-between
<!DOCTYPE html> <html> <head> <Meta charset="utf-8"> <title>文档标题</title> <style> .menu{ height:200px; display:flex; flex-direction:row; justify-content: space-between; align-items:center } .item{ width:20px; height:40px; border:solid green; background:red; } </style> </head> <body> <div class="menu"> <div class="item"> 1 </div> <div class="item"> 2 </div> <div class="item"> 3 </div> <div class="item"> 4 </div> </div> </body> </html>
原文地址:https://www.cnblogs.com/huahuawang/p/14849090.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。