该博客记录了使用flex实现网页中按钮布局的方法，可帮助开发者掌握利用flex进行网页布局的技巧，属于前端开发领域的实用内容。
记录一下使用flex实现网页中的按钮布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
background:#ccc;
display: flex;
justify-content: space-around; /* 控制子盒子在主轴上分布左右 */
height: 300px; /* 设置父容器高度 */
}
.box {
width: 100px;
height: 50px;
align-self: flex-end; /* 控制子盒子在侧轴上底部对齐 */
margin:0 0 10px 0;
font-size:30px
}
</style>
</head>
<body>
<div class="container">
<div class="box" style="background-color: #4cae4c;">提交</div>
<div class="box" style="background-color: #1c84c6;">关闭</div>
</div>
</body>
</html>实现效果如下
扫一扫
677
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
