[html] Salto de línea en flexbox multilínea



Answers

@Oriol tiene una excelente respuesta, lamentablemente a partir de octubre de 2017, ni display:contents , ni page-break-after es ampliamente compatible, mejor dicho, se trata de Firefox que admite esto pero no a los otros jugadores, he encontrado lo siguiente ". hackear "que considero mejor que la codificación difícil 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 dije, es un truco y el inconveniente es que necesitas agregar bastantes elementos extra para nada, pero funciona y funciona cruzado incluso en el IE11 con fecha.

El "truco" es simplemente agregar un elemento adicional después de cada div, que se configura para display:none y luego se usa css nth-child para decidir cuál de estos debe 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>

Question

¿Hay alguna manera de hacer un salto de línea en flexbox de múltiples líneas?

Por ejemplo, para romper después de cada 3er artículo en este bolígrafo

.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;
}
.item:nth-child(3n) {
  background: silver;
}
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <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>

Me gusta

.item:nth-child(3n){
  /* line-break: after; */    
}



Desde mi punto de vista, es más semántico usar elementos <hr> 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 está siguiendo

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

.container hr {
  width: 100%;
}

Probado en Chrome 66, Firefox 60 y Safari 11.




Para preguntas futuras, también es posible hacerlo mediante el uso de la propiedad float y despejándola en cada 3 elementos.

Aquí hay un ejemplo que hice.

.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>




Related