Come interrompere la linea in un layout flessibile?

Question

Ho il mio primo, secondo e terzo elemento e poi voglio che il quarto elemento passi alla riga successiva, indipendentemente da quanto ampio è lo spazio.

.box { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: space-around; 
 
    align-items: flex-start; 
 
} 
 
.it { 
 
    max-width: 420px; 
 
}

<div class="box"> 
 
    <div class="it">1</div> 
 
    <div class="it">2</div> 
 
    <div class="it">3</div> 
 
    <div class="it">4</div> 
 
</div>

Answer 1

è possibile inserire una pseudo-elemento largo alla giusta posizione:

.flex-container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.flex-container::after { 
 
    content: ''; 
 
    width: 100%; 
 
} 
 
.flex-item:last-child { /* or `:nth-child(n + 4)` */ 
 
    order: 1; 
 
}

<div class="flex-container"> 
 
    <div class="flex-item">1</div> 
 
    <div class="flex-item">2</div> 
 
    <div class="flex-item">3</div> 
 
    <div class="flex-item">4</div> 
 
</div>