Flexbox Layout Muster: 5 Square (1 Large, 4 small)

Question

Ich versuche ein Flexbox-Layout zu erstellen - für die Zwecke dieser Frage werde ich es ein "Square Five Block" -Layout nennen (siehe Bild) - aber ich laufe in Schwierigkeiten, da alle Experimente, die ich versucht habe, nicht richtig umschliessen.

Ich habe das gleiche Layout mit Floats gesehen, aber ich hatte gehofft, es ein wenig zukunftssicher zu machen und eine modernere Methode zu verwenden - daher Flexbox. Ich habe versucht, nach diesem Muster zu suchen, aber es scheint keinen konsistenten Namen dafür zu geben, also ist es schwierig, ähnliche Beispiele zu finden.

Ich verwende auch Ansichtsfenster-Einheiten, um sicherzustellen, dass die Blöcke perfekt quadratisch bleiben, basierend auf der Breite des Darstellungsfelds (vw).

div { width: 25vw; height: 25vw; } 
div:first-of-type { width: 50vw; height: 50vw; } 

Die Hauptmerkmale ist, dass alle Blöcke quadratisch sein sollte jedoch der erste Block die Größe der verbleibenden vier kombiniert sein sollte. Hat jemand schon einmal ein solches Layout gesehen oder bearbeitet?

Dank !!

Answer 1

Verschachtelte Flexboxen funktionieren hier in Kombination mit Medienabfragen.

Codepen Demo with media query

Grundsätzlich gilt:

* { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.parent { 
 
    width: 100vw; 
 
    display: flex; 
 
} 
 
.col { 
 
    flex: 0 0 50vw; 
 
    height: 50vw; 
 
    background: blue; 
 
} 
 
.wrap { 
 
    display: flex; 
 
    flex-wrap: wrap 
 
} 
 
.box { 
 
    flex: 0 0 25vw; 
 
    height: 25vw; 
 
} 
 
.red { 
 
    background: red; 
 
} 
 
.pink { 
 
    background: pink; 
 
} 
 
.orange { 
 
    background: orange; 
 
} 
 
.grey { 
 
    background: grey; 
 
}

<div class="parent"> 
 
    <div class="col"></div> 
 
    <div class="col wrap"> 
 
    <div class="box red"></div> 
 
    <div class="box pink"></div> 
 
    <div class="box orange"></div> 
 
    <div class="box grey"></div> 
 
    </div> 
 
</div>

Answer 2

den Code unten sehen und das Ergebnis erweitern. Ich habe Flexbox verwendet

body { 
 
    margin: 0; 
 
    height: 100vh; 
 
    width: 100vw; 
 
} 
 

 
.wrapper { 
 
    height: 100%; 
 
} 
 

 
.layout.horizontal, 
 
.layout.vertical { 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
} 
 

 
.layout.horizontal { 
 
    -ms-flex-direction: row; 
 
    -webkit-flex-direction: row; 
 
    flex-direction: row; 
 
} 
 

 
.layout.vertical { 
 
    -ms-flex-direction: column; 
 
    -webkit-flex-direction: column; 
 
    flex-direction: column; 
 
} 
 

 
.flex { 
 
    -ms-flex: 1 1 0.000000001px; 
 
    -webkit-flex: 1; 
 
    flex: 1; 
 
    -webkit-flex-basis: 0.000000001px; 
 
    flex-basis: 0.000000001px; 
 
} 
 

 
.box { 
 
    color: #fff; 
 
    text-align: center; 
 
} 
 

 
.box.blue { 
 
    background: #312783; 
 
} 
 

 
.box.green { 
 
    background: #0B983A; 
 
} 
 

 
.box.yellow { 
 
    background: #E1BD48; 
 
} 
 

 
.box.pink { 
 
    background: #D2007F; 
 
} 
 

 
.box.orange { 
 
    background: #EB6053; 
 
} 
 

 
@media all and (max-width: 768px) { 
 
    .change-in-responsive.layout.horizontal { 
 
    -ms-flex-direction: column; 
 
    -webkit-flex-direction: column; 
 
    flex-direction: column; 
 
    } 
 
}

<div class="layout horizontal wrapper change-in-responsive"> 
 
    <div class="box large flex blue">1</div> 
 
    <div class="flex layout vertical"> 
 
    <div class="flex layout horizontal"> 
 
     <div class="box green flex">2</div> 
 
     <div class="box yellow flex">3</div> 
 
    </div> 
 
    <div class="flex layout horizontal"> 
 
     <div class="box pink flex">4</div> 
 
     <div class="box orange flex">5</div> 
 
    </div> 
 
    </div> 
 
</div>