¿Cómo especificar saltos de línea en un diseño de flexbox de varias líneas?
¿Hay alguna manera de hacer un salto de línea en un flexbox de varias líneas?
Por ejemplo, para romper después de cada tercer elemento de este CodePen .
.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>Como
.item:nth-child(3n){
/* line-break: after; */
}
La solución más sencilla y fiable es insertar elementos flexibles en los lugares correctos. Si son lo suficientemente anchos ( width: 100%), forzarán un salto de línea.
Mostrar fragmento de código
Pero eso es feo y no semántico. En su lugar, podríamos generar pseudoelementos dentro del contenedor flexible y usarlos orderpara moverlos a los lugares correctos.
Mostrar fragmento de código
Pero hay una limitación: el contenedor flexible solo puede tener un pseudoelemento ::beforey un ::afterpseudoelemento. Eso significa que sólo puedes forzar 2 saltos de línea.
Para resolver eso, puede generar los pseudoelementos dentro de los elementos flexibles en lugar de en el contenedor flexible. De esta manera no estará limitado a 2. Pero esos pseudoelementos no serán elementos flexibles, por lo que no podrán forzar saltos de línea.
Pero afortunadamente, CSS Display L3 ha introducido display: contents(actualmente solo compatible con Firefox 37):
El elemento en sí no genera ningún cuadro, pero sus hijos y pseudoelementos aún generan cuadros normalmente. A los efectos de la generación y el diseño del cuadro, el elemento debe tratarse como si hubiera sido reemplazado con sus hijos y pseudoelementos en el árbol del documento.
Así que puedes aplicar display: contentsa los hijos del contenedor flexible y envolver el contenido de cada uno dentro de un envoltorio adicional. Entonces, los elementos flexibles serán esos envoltorios adicionales y los pseudoelementos de los hijos.
Mostrar fragmento de código
Alternativamente, según una versión antigua de la especificación , Flexbox permitía pausas forzadas mediante el uso de break-before, break-aftero sus antiguos alias CSS 2.1:
.item:nth-child(3n) {
page-break-after: always; /* CSS 2.1 syntax */
break-after: always; /* CSS 3 syntax */
}
Pero estos saltos de línea forzados sólo funcionan en Firefox, y no creo que deban funcionar según las especificaciones actuales. La nueva forma propuesta (no implementada en ninguna parte) es con wrap-beforeowrap-after :
.item:nth-child(3n) {
wrap-after: flex; /* New proposed syntax */
}
Mostrar fragmento de código
Desde mi perspectiva, es más semántico utilizar <hr> elementos como saltos de línea entre elementos flexibles.
.container {
display: flex;
flex-flow: wrap;
}
.container hr {
width: 100%;
}<div class="container">
<div>1</div>
<div>2</div>
<hr>
<div>3</div>
<div>2</div>
...
</div>Probado en Chrome 66, Firefox 60 y Safari 11.
