文章数据
收藏(次)
Html中使用flex布局让子元素占领父元素的剩余空间
代码运行在 chrome 浏览器， 版本 84
效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html,body{
height: 100%;
}
</style>
</head>
<body>
<div style="display: flex; flex-direction: row">
<input type="text" style="flex: 1">
<button>确定</button>
<button>取消</button>
</div>
<div style="display: flex; flex-direction: column; height: 50%">
<div style="flex: 1; background: #ff5555; width: 100px"></div>
<button>确定</button>
<button>取消</button>
</div>
</body>
</html>分享
收藏
点赞人
举报
文章标签
评论列表
