A君有阵子没写前端代码了 今天看了下flex layout 觉得真的很方便 以前要js解决的 几行配置就可以搞定了!
上代码
<html>
<head>
<meta charset="utf-8">
<meta name="google" value="notranslate">
<style>
.hbox {
display: flex;
}
.vbox {
display: flex;
flex-direction: column;
}
* {
box-sizing: border-box;
}
</style>
</head>
<body style="background: rgb(255, 255, 255);">
<div style="display: flex; height: 100%;">
<div style="width: 100px;background: coral;height: 100%;"></div>
<div class="vbox" style="
flex-grow: 1;
height: 100%;
background: beige;
">
<div style="
height: 100px;
border: 5px solid darkgray;
"></div>
<div style="
border: 5px solid cadetblue;
flex-grow: 1;
"></div>
</div>
</div>
</body>
</html>
大功告成~~