Verschachtelte Flexbox Erweiterungsprobleme

Question

Also habe ich eine verschachtelte Flexbox für ein Website-Layout. Die erste flexbox stellt sicher, dass 3 Elemente in einer Spalte die gleiche Breite und eine über der anderen bleiben.

Die zweite ist, wo ich Probleme habe. Ich möchte eine Hauptbox zwischen zwei Seitenleisten haben, die Hauptbox dreimal größer als die Seitenleisten. Ich möchte, dass sich das sowohl horizontal als auch vertikal ausdehnt, aber ich bin mir nicht sicher, wie ich es als Ganzes herausfinden soll.

It's meant to look like this

and the result I'm getting is more akin to this

-Code Auszüge hier:

.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; 
} 

Und

<div class="flexcontainer"> 

<header id="header">Header</header> 

<div class="container"> 

<div class="leftcont"> 

<!--Links--> 
    <div id="navigation"></div> 
    <span> 
    <a href=" ">Link</a><br /> 
    <a href=" ">Link</a><br /> 
     <a href=" ">Link</a><br /> 
    <a href=" ">Link</a><br /> 
    <a href=" ">Link</a><br /> 
    <a href=" ">Link</a><br /> 
    <a href=" ">Link</a><br /> 
    <a href=" ">Link</a><br /> 
    <a href=" ">Link</a><br /> 
    <a href=" ">Link</a><br /> 
    </span> 

</div><div class="bodycont"> 

<div id="bodyheader"></div> 

<br /> 
<span class="welcome"> 
Welcome message.</span> 
<p> 

</div><div class="rightcont"> 

<!--Character--> 
     <div id="character"></div> 
    <span> 

    <a href=" " class=" "><span class="name">First Name Last Name</span></a> 
    </span> 
    <span>Title</span> 

<p> 

</div></div> 

<footer id="footercont"> 
<div class="footer"></div> 
<span>Copyright</span> 
</footer> 
</div> 

Wenn jemand kann mir sagen, was ich falsch mache, die erstaunlich sein würde und Sie Hab meinen ewigen Dank!

Answer 1

Zuerst entfernen Sie alle absoluten Positionierung. Es ist nicht notwendig, Ihr Layout zu erreichen. Plus, absolut positionierte Elemente ignorieren flex Eigenschaften.

Zweitens haben Sie viele unnötige Regeln aufgebläht Ihren Code. Sie können sie sicher entfernen.

Um Elemente belegen verbleibenden Platz in einer Zeile verwenden: flex: 1.

Um Lücken zwischen Boxen zu erstellen, verwenden Sie margin.

revised codepen demo

Answer 2

sollten Sie verwenden flex-wachsen Eigenschaft basierend auf Verhältnissen arrangieren

das Zentrum div

flex-grow:3 

geben und nach links und rechts Behälter

flex-grow:1 

Dies sollte nützlich sein https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow?v=control

Answer 3

Hinzufügen Sie einfach auf die Antwort: Statt es Sie können den Körper Behälter geben einen flex eine flexbasis von 50% des Gebens: 2, während die andere sind 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; 
}