Avvolgere l'elemento in una nuova riga/riga utilizzando la flexbox

Question

Ho difficoltà a forzare un articolo nella riga successiva in un layout della stampante.

Come posso fare qualcosa come l'immagine seguente?

Questo è quello che ho ottenuto finora:

#wrap { 
 
    display: flex; 
 
    width: 86vw; 
 
    height: auto; 
 
    box-sizing: border-box; 
 
    margin: 0 auto; 
 
} 
 
.item1, 
 
.item2 { 
 
    width: 50%; 
 
    height: 24.5vw; 
 
    background: #4add69; 
 
} 
 
.item1 { 
 
    margin-right: 10px; 
 
} 
 
.item2 { 
 
    margin-left: 10px; 
 
} 
 
.item3 { 
 
    width: 60%; 
 
    height: 40vw; 
 
    background: #d56c6c; 
 
}

<div id="wrap"> 
 
    <div class="item1"></div> 
 
    <div class="item2"></div> 
 
    <div class="item3"></div> 
 
</div>

Answer 1

Il codice va bene, ma mancano due cose.

1. Usa flex-wrap: wrap per creare una nuova riga. Modifica la larghezza dei primi due articoli da presenti in una singola riga.

2. Per gli ultimi due elementi, è necessario nidificarlo all'interno di un contenitore e quindi avvolgerli nuovamente.

Manipolare i valori di quota (larghezza, altezza) e margine per ottenere il layout perfetto/adatto.

JSfiddle Demo

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    background: #232323; 
 
    padding: 10px; 
 
} 
 
#wrap { 
 
    display: flex; 
 
    width: 86vw; 
 
    height: auto; 
 
    box-sizing: border-box; 
 
    margin: 0 auto; 
 
    flex-wrap: wrap; 
 
    background: #232323; 
 
    /* Added */ 
 
} 
 
.item1, 
 
.item2 { 
 
    width: 48%; 
 
    /* Modified */ 
 
    height: 24.5vw; 
 
    background: #4add69; 
 
    margin-bottom: 10px; 
 
} 
 
.item1 { 
 
    margin-right: 10px; 
 
} 
 
.item2 { 
 
    margin-left: 10px; 
 
} 
 
.item3 { 
 
    width: 55%; 
 
    height: 40vw; 
 
    background: #d56c6c; 
 
    margin-right: 10px; 
 
} 
 
.nested-items { 
 
    display: flex; 
 
    width: 42%; 
 
    flex-wrap: wrap; 
 
    align-content: space-between; 
 
} 
 
.item4, 
 
.item5 { 
 
    background: lightblue; 
 
    width: 100%; 
 
    height: 49%; 
 
}

<div id="wrap"> 
 
    <div class="item1"></div> 
 
    <div class="item2"></div> 
 
    <div class="item3"></div> 
 
    <div class="nested-items"> 
 
    <div class="item4"></div> 
 
    <div class="item5"></div> 
 
    </div> 
 
</div>

Answer 2

In sostanza hai bisogno di un div involucro in più per i due elementi 'piccoli' in questo modo:

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 
.wrap { 
 
    width: 75%; 
 
    margin: 1em auto; 
 
    border: 1px solid green; 
 
    padding: .25em; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.wrap div { 
 
    border: 1px solid grey; 
 
    margin-bottom: 1px; 
 
} 
 
.box { 
 
    height: 80px; 
 
    background: lightblue; 
 
    flex: 0 0 50%; 
 
} 
 
.tall { 
 
    flex: 0 0 65%; 
 
    height: 160px; 
 
} 
 
.col { 
 
    flex: 0 0 35%; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.mini { 
 
    flex: 0 0 100%; 
 
    height: 80px; 
 
    background: pink; 
 
}

<div class="wrap"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box tall"></div> 
 
    <div class="box col"> 
 
    <div class="mini"></div> 
 
    <div class="mini"></div> 
 
    </div> 
 
</div>

Qui ho utilizzato un singolo elemento generale con il wrapping ma l'immagine suggerisce che sarebbe molto più semplice con le righe effettive e il wrapper extra menzionato prima.

Codepen Demo della 2a opzione con righe.