Salto de línea en flexbox multilínea

@Oriol tiene una excelente respuesta, tristemente a partir de octubre de 2017, ni display:contents, ni page-break-after es ampliamente compatible, mejor dicho se trata de Firefox que soporta esto, pero no los otros jugadores, he llegado con el siguiente "hack" que considero mejor que la codificación dura en un descanso después de cada 3er elemento, porque eso hará que sea muy difícil hacer que la página sea amigable para dispositivos móviles.

Como se ha dicho, es un truco y el inconveniente es que necesita agregar muchos elementos adicionales para nada, pero hace el truco y funciona cross browser incluso en la fecha IE11.

El "hack" es simplemente agregar un elemento adicional después de cada div, que se establece en display:none y luego se usa el css nth-child para decidir cuál de estos debería hacerse visible forzando un freno de línea como este:

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.item {
  width: 100px;
  background: gold;
  height: 100px;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px
}
.item:nth-child(3n-1) {
  background: silver;
}
.breaker {display:none;}
.breaker:nth-child(3n) {
  display:block;
  width:100%;
  height:0;
 }

<div class="container">
  <div class="item">1</div><p class=breaker></p>
  <div class="item">2</div><p class=breaker></p>
  <div class="item">3</div><p class=breaker></p>
  <div class="item">4</div><p class=breaker></p>
  <div class="item">5</div><p class=breaker></p>
  <div class="item">6</div><p class=breaker></p>
  <div class="item">7</div><p class=breaker></p>
  <div class="item">8</div><p class=breaker></p>
  <div class="item">9</div><p class=breaker></p>
  <div class="item">10</div><p class=breaker></p>
</div>

Desde mi perspectiva es más semántico usar <hr> elementos como saltos de línea entre elementos flexibles.

<div class="container">
  <div>1</div>
  <div>2</div>
  <hr>
  <div>3</div>
  <div>2</div>
  ...
</div>

El CSS sigue

.container {
  display: flex;
  flex-flow: wrap;
}

.container hr {
  width: 100%;
}

Probado en Chrome 66, Firefox 60 y Safari 11.

Creo que la forma tradicional es flexible y bastante fácil de entender:

Marcado

<div class="flex-grid">
    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>

    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>

    <div class="col-3">.col-3</div>
    <div class="col-9">.col-9</div>

    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
</div>

Crea cuadrícula.archivo css:

.flex-grid {
  display: flex;
  flex-flow: wrap;
}

.col-1 {flex: 0 0 8.3333%}
.col-2 {flex: 0 0 16.6666%}
.col-3 {flex: 0 0 25%}
.col-4 {flex: 0 0 33.3333%}
.col-5 {flex: 0 0 41.6666%}
.col-6 {flex: 0 0 50%}
.col-7 {flex: 0 0 58.3333%}
.col-8 {flex: 0 0 66.6666%}
.col-9 {flex: 0 0 75%}
.col-10 {flex: 0 0 83.3333%}
.col-11 {flex: 0 0 91.6666%}
.col-12 {flex: 0 0 100%}

[class*="col-"] {
  margin: 0 0 10px 0;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

@media (max-width: 400px) {
  .flex-grid {
    display: block;
  }
}

He creado un ejemplo (jsfiddle)

Trate de cambiar el tamaño de la ventana bajo 400px, es sensible!!

¿Quieres un salto de línea semántico?

Entonces considere usar <br>. W3C puede sugerirle que BR es solo para escribir poemas (el mío llegará pronto), pero puede cambiar el estilo para que se comporte como un elemento de bloque de ancho 100% que empujará su contenido a la siguiente línea. Si ' br ' sugiere un descanso, entonces me parece más apropiado que usar hr o un 100% div y hace que el html sea más legible.

Inserte el <br> donde necesite saltos de línea y estilo como este.

 // Use `>` to avoid styling `<br>` inside your boxes 
 .container > br 
 {
    width: 100%;
    content: '';
 }

Puedes deshabilitar <br> con media queries, configurando display: a block o none según corresponda (he incluido un ejemplo de esto pero lo dejé sin comentarios).

Puede usar order: para establecer el orden si es necesario también.

Y puedes poner tantas como quieras, con diferentes clases o nombres: -)

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.item {
  width: 100px;
  background: gold;
  height: 100px;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px
}

.container > br
{
  width: 100%;
  content: '';
}

// .linebreak1 
// { 
//    display: none;
// }

// @media (min-width: 768px) 
// {
//    .linebreak1
//    {
//       display: block;
//    }
// }

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <br class="linebreak1"/>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

No hay necesidad de limitarse a lo que dice el W3C:

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}

.item {
  width: 100px;
  height: 100px;
  background: gold;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px;
}

<div class="container">
  <div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
  <div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
  <div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
  </div>
  <div class="item">10</div>
</div>

Puede intentar envolver los elementos en un elemento dom como aquí. con esto no tienes que saber mucho de css solo tener una buena estructura resolverá el problema.

Para preguntas futuras, también es posible hacerlo usando la propiedad float y limpiándola en cada 3 elementos.

Aquí hay un ejemplo que he hecho.

.grid {
  display: inline-block;
}

.cell {
  display: inline-block;
  position: relative;
  float: left;
  margin: 8px;
  width: 48px;
  height: 48px;
  background-color: #bdbdbd;
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-indent: 4px;
  color: #fff;
}

.cell:nth-child(3n) + .cell {
  clear: both;
}

<div class="grid">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>
  <div class="cell">7</div>
  <div class="cell">8</div>
  <div class="cell">9</div>
  <div class="cell">10</div>
</div>