Html 嵌套Flexbox展开问题

所以我有一个嵌套的flexbox用于网站布局。第一个flexbox确保一列中的三个项目保持相同的宽度，一个项目位于另一个项目之上

第二个是我遇到的问题。我想在两个边栏之间有一个主框，主框比边栏大3倍。我希望它在垂直和水平方向上都能得到相应的扩展，但我不知道如何从整体上解决这个问题

代码摘录如下：

   .flexcontainer {
    width: 100vw;
    max-width: 1123px;
    min-width: 800px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    flex-flow: column;
    -webkit-flex-flow: column;
    -ms-flex-flow: column;
}   

.container {
    width: 95vw;
    max-width:1123px;
    min-height: 675px;
    min-width: 800px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    justify-content: space-around;
    -webkit-justify-content: space-around;
    -ms-justify-content: space-around;
    flex-flow: row;
    -webkit-flex-flow: row;
    -ms-flex-flow: row;
    align-items: stretch;
    -webkit-align-items: stretch;
    -ms-align-items: stretch;
}

.leftcont { 
    border: #00ff00 2px solid;
    text-align:center;
    max-width:175px;
    min-height: 666px;
    position: absolute;
    left: 0;
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    flex-flow: column;
    -webkit-flex-flow: column;
    -ms-flex-flow: column;
    flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
}

.bodycont {
    border: #00ff00 2px solid;
    padding-left: 5px;
    padding-right: 5px;
    text-align:left;
    min-height: 666px;
    min-width: 465px;
    position:absolute;
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    flex-flow: column;
    -webkit-flex-flow: column;
    -ms-flex-flow: column;
    flex: 6;
    -webkit-flex: 6;
    -ms-flex: 6;
}

.rightcont {
    border: #00ff00 2px solid;
    text-align:center;
    max-width: 175px;
    min-height: 666px;
    position: absolute;
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    flex-flow: column;
    -webkit-flex-flow: column;
    -ms-flex-flow: column;
    right: 0;
    flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
}


#footercont {
    border: #00ff00 2px solid;
    max-width: 95vw;
    min-width: 796px;
    margin-left:auto;
    margin-right:auto;
    bottom: 0;
    position: relative;
    font-size: 10px;
    color: #00ff00;
    text-align: center;
}

.footer {
    background-image: url(/images/layout/aegis-copyright.png);
    background-repeat: no-repeat;
    height: 18.77vw;
    max-width: 86px;
    max-height: 19px;
    margin-left: auto;
    margin-right: auto;
}

及

标题






















欢迎辞。

标题

版权

---

如果有人能告诉我我做错了什么，那将是惊人的，我将永远感谢你

您应该使用flex grow属性根据比率进行排列

给中间一个div

flex-grow:3 

和左右容器

flex-grow:1

---

这应该很有用

您应该使用flex grow属性根据比率进行排列

给中间一个div

flex-grow:3 

和左右容器

flex-grow:1

---

这应该很有用

首先，删除所有绝对定位。没有必要实现您的布局。另外，绝对定位的元素会忽略flex属性

其次，有许多不必要的规则使代码膨胀。您可以安全地移除它们

要使元素占据行中的剩余空间，请使用：

flex:1

要在框之间创建间隙，请使用

边距

首先，移除所有绝对定位。没有必要实现您的布局。另外，绝对定位的元素会忽略flex属性

其次，有许多不必要的规则使代码膨胀。您可以安全地移除它们

要使元素占据行中的剩余空间，请使用：
flex:1

要在框之间创建间隙，请使用
边距

只是补充了一个答案：与其给body容器50%的flexbasis，不如给它一个flex:2，而另一个是flex:1

.leftcont {
    flex: 1;
    margin: 10px 10px 10px 0;
}
.bodycont {
    /* flex: 0 0 50%; */
    flex: 2;
    margin: 10px 0;
}
.rightcont {
    flex: 1;
    margin: 10px 0 10px 10px;
}

只是补充一下答案：与其给body容器50%的flexbasis，不如给它一个flex:2，而另一个是flex:1

.leftcont {
    flex: 1;
    margin: 10px 10px 10px 0;
}
.bodycont {
    /* flex: 0 0 50%; */
    flex: 2;
    margin: 10px 0;
}
.rightcont {
    flex: 1;
    margin: 10px 0 10px 10px;
}

顺便说一句，在这一行中，你有一个额外的“in哦，谢谢！现在修复了它！这是你想要的吗？你在很多不必要的地方使用了
position:absolute
（这也破坏了你的flexbox布局，因为它删除了
position
ed元素对flexbox布局的贡献）.从你的CSS来看，很明显你对CSS很陌生，这很好，你必须从某个地方开始！但我对CSS新手有一个建议-除非你绝对必须，否则不要定位事物。
position
ing是一个棘手的概念，最终会
点击
，但在此之前，
position
-ing当你不确定的时候会导致很多混乱。@Michael_B看起来已经好多了，谢谢！！！我现在只是想知道如何让盒子之间有空隙？顺便说一句，在这行你有一个额外的“哦，谢谢！”！现在修好了！这是你想要的吗？您在许多不必要的地方使用了
position:absolute
（这也破坏了您的flexbox布局，因为它删除了
position
ed元素对flexbox布局的贡献）。从你的CSS来看，很明显你对CSS很陌生，这很好，你必须从某个地方开始！但是我有一个建议给那些刚接触CSS的人——除非你必须这样做，否则不要定位任何东西<“编码>定位”
ing是一个棘手的概念，它最终会
为您单击
，但在此之前，
定位”
-ing在您不确定的情况下最终会造成很多混乱。@Michael\u B看起来已经好多了，谢谢！！！我只是想知道现在如何让盒子之间有空隙？非常感谢！我会记得在将来让我的代码不那么混乱！非常感谢你！我会记得在将来让我的代码不那么混乱！