在父级设置:
display: flex;将对象作为弹性伸缩盒显示flex-flow: column;方向设置为垂直方向(flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性,直接使用flex-direction亦可)父级需设置高度在子级设置占比:
flex: 1;按占比分配非设置固定值的空间* {margin: 0;padding: 0;}html, body {height: 100%;}.wrap {height: 100%;flex-flow: column;display:flex;}.header {height: 30px;line-height: 30px;background: pink;}.wrapper {flex: 1;display:flex;border: 1px solid blue;}.left, .middle, .right {flex: 1;display:flex;flex-flow: column;padding: 5px 0;}.cl {border: 1px solid pink;flex: 1;margin: 5px;}头部标题123456789