Einstellung Layout mit Flexbox

Question

Ich habe ein Drahtgitter unten und möchte sehen, was ist der beste Weg, um dies mit flexbox zu kodieren.

Ich habe eine simple flexbox grid system codiert, aber mein Drahtmodell erfordert mehr Anpassung als das, was ich auf meinem Grid-System habe.

Ich habe Eltern div display: flex hat und haben 2 Kind divs haben flex:1 und flex: 0 0 40%. Was ist der beste Weg, Inhalt div (graue Kästchen innen auf blau und rot), die mit Rest des Haupt-Wrapper bleiben (gesamte graue Box setzt auf max-width: 1400px)?

Vielen Dank.

Answer 1

Hier ist die allgemeine Idee.

Positionierte Pseudoelemente, eines für jeden Abschnitt der Zeile. Bei geeigneter Breite (beachten Sie, dass die bodyoverflow-x:hidden haben sollte) und entsprechende Positionswerte.

* { 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    overflow-x: hidden; 
 
} 
 
.wrapper { 
 
    min-height: 100vh; /* for demo purposes */ 
 
    width: 60%; 
 
    margin: auto; 
 
    background: grey; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
header { 
 
    height: 20vh; 
 
    background: green; 
 
} 
 
.inner { 
 
    height: 30vh; 
 
    display: flex; 
 
} 
 
main { 
 
    background: blue; 
 
    flex: 1; 
 
    border: 2px solid black; 
 
} 
 
aside { 
 
    background: red; 
 
    flex: 0 0 40%; 
 
    border: 2px solid black; 
 
} 
 
.other { 
 
    background: pink; 
 
    flex: 1; 
 
} 
 
/* magic section */ 
 

 
.extend { 
 
    position: relative; 
 
} 
 
.extend::after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 100vw; 
 
    top: 0; 
 
    height: 100%; 
 
    background: inherit; 
 
    z-index: -1; 
 
} 
 
.left::after { 
 
    right: 0; 
 
} 
 
.right::after { 
 
    left: 0; 
 
}

<div class="wrapper"> 
 
    <header></header> 
 
    <div class="inner"> 
 
    <main class="extend left"></main> 
 
    <aside class="extend right"></aside> 
 
    </div> 
 
    <div class="other"></div> 
 
</div>