2
我正在尝试使用带有页眉和页脚的flexbox列布局。浏览器最大化时，布局看起来很干净。当您调整窗口大小时（例如在电话上查看），我试图让块堆叠，但主要内容与左栏重叠，右栏与页脚重叠。Flexbox布局在手机视图中不断重叠页脚
.wrap {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: calc(100vh - 80px);
width: 70%;
margin: 0 auto;
text-align: center;
}
header {
padding: 20px;
background: #222930;
color: #E9E9E9;
height: 125px;
}
footer {
padding: 20px;
background: #222930;
color: white;
bottom: 0;
text-align: center;
}
main {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
background: #222930;
}
main .content {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
background: #222930;
color: #E9E9E9;
}
main .left {
width: 160px;
background: #222930;
-webkit-box-ordinal-group: 0;
-webkit-order: -1;
-ms-flex-order: -1;
order: -1;
color: #E9E9E9;
}
main .right {
width: 160px;
background: #222930;
color: white;
}
@media (max-width: 640px) {
main {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
main .left,
main .right {
width: auto;
height: 50px;
}
}<div class="wrap">
<header>header</header>
<main>
<div class="content">content</div>
<div class="left">left</div>
<div class="right">right</div>
</main>
<footer>footer</footer>
</div>我在网页上有更多的内容，但我没有看到有必要将其粘贴。如果有人好奇我遇到，这里是刷爆视觉的它： 
而这正是它看起来像在手机上： 
就像我说的，我试图让块堆叠在一起，甚至使菜单缩小时缩小，但页脚仍然重叠。
一些建议将是伟大的，不知道我在这里失踪。第一次尝试flexbox方法..