三个元素高度均不能确定，上下两个元素自然撑开，中间元素填充剩余高度
作者：互联网
重点：flex:+数字。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="minimum-scale=1.0,user-scalable=no,initial-scale=1.0" />
<title>界面</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body, html {
height: 100%;
overflow: hidden;
}
.btnbox {
width: 100%;
display: inline-block;
text-align: center;
}
.btn-svg {
width: 2em;
fill: #fff;
margin: 0.5em;
}
.btn-svg:active {
width: 2em;
margin: 0.5em;
fill: #fff;
opacity: 0.75;
}
.head {
flex: 1;
background-color: #f08;
}
.foot {
flex: 1;
display: flex;
background-color: #f08;
}
.frame {
height: 100%;
flex: 2147483647;
}
.box {
display: flex;
align-self: stretch;
flex-wrap: wrap;
flex-flow: column;
height: 100%;
}
</style>
</head>
<body>
<div class="box">
<div class="head">
<svg class="btn-svg" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-20 -20 140 140">
<path d="M100,50c0,27.6-22.4,50-50,50S0,77.6,0,50S22.4,0,50,0S100,22.4,100,50z M61.8,19.1H50L26.4,50L50,80.9h11.8 L38.2,50L61.8,19.1z" />
</svg>
</div>
<div class=" frame">
</div>
<div class="foot ">
<span class="btnbox">
<a href='#'>
<div>
<svg class="btn-svg" viewBox='0,0,100,100' preserveAspectRatio='xMinYMin meet'>
<polygon stroke-width='0' fill='#fff'
points='50,0 100,38.196601 100,100 61.803400,100 61.803400,61.803400 38.196601,61.803400 38.196601,100 0,100 0,38.196601' />
</svg>
</div>
</a>
</span>
<span class="btnbox">
<a href='#'>
<div>
<svg class="btn-svg" viewBox="0 0 100 100" preserveAspectRatio='xMinYMin meet'>
<polygon points="55.38 0 80.35 24.98 55.38 24.98 55.38 0" fill="#fff" />
<polygon points="80.35 30.02 50.33 30.02 50.33 0 23.45 0 1.75 0 0 0 0 46 80.35 46 80.35 30.02" fill="#fff" />
<ellipse cx="80.35" cy="90.45" rx="19.65" ry="9.55" fill="#fff" />
<ellipse cx="80.35" cy="59.55" rx="19.65" ry="9.55" fill="#fff" />
<path d="M100,67.29V90.45H60.7V67.29C64.87,70.85,72,73.1,80.35,73.1S95.83,70.85,100,67.29Z" fill="#fff" />
<path d="M0,45V90.45H56.7V59.55C56.7,51.82,66.87,46,80.35,46V45Z" fill="#fff" />
</svg>
</div>
</a>
</span>
<span class="btnbox">
<a href='#'>
<div>
<svg class="btn-svg" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio='xMinYMin meet'>
<polygon points="58.5,86.3 57.3,100 42.7,100 41.5,86.3 " fill="#FFFFFF" />
<polygon points="41.5,13.7 42.7,0 57.3,0 58.5,13.7 " fill="#FFFFFF" />
<polygon points="13.7,58.5 0,57.3 0,42.7 13.7,41.5 " fill="#FFFFFF" />
<polygon points="100,42.7 100,57.3 86.3,58.5 86.3,41.5 " fill="#FFFFFF" />
<polygon points="18.3,30.3 9.5,19.8 19.8,9.5 30.3,18.3 " fill="#FFFFFF" />
<polygon points="90.5,80.2 80.2,90.5 69.7,81.7 81.7,69.7 " fill="#FFFFFF" />
<polygon points="30.3,81.7 19.8,90.5 9.5,80.2 18.3,69.7 " fill="#FFFFFF" />
<polygon points="90.5,19.8 81.7,30.3 69.7,18.3 80.2,9.5 " fill="#FFFFFF" />
<path d="M89.3,50c0,21.7-17.6,39.3-39.3,39.3S10.7,71.7,10.7,50c0-21.7,17.6-39.3,39.3-39.3c0,0,0,0,0,0
C71.7,10.7,89.3,28.3,89.3,50z M50,35c-8.3,0-15,6.7-15,15s6.7,15,15,15s15-6.7,15-15S58.3,35,50,35z" fill="#FFFFFF" />
</svg>
</div>
</a>
</span>
</div>
</div>
</body>
</html>
标签：flex,width,100%,元素,高度,height,撑开,margin,display 来源： https://blog.csdn.net/dscn15848078969/article/details/111059659