css - manejo - ¿Cómo controlar el número de elementos por fila usando consultas de medios en Flexbox?

inline flex

Question

Entonces imagina que tengo el siguiente Markup

<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

Y los siguientes estilos (SASS)

@mixin max-width($width) {
@media screen and (max-width: $width) {
@content;
}
}
.container {
display: flex;
@include max-width(992px) {
number: 4; //Hypothetical property that is supposed to control number per row
}
@include max-width(640px) {
number: 2; //Hypothetical property that is supposed to control number per row
}
}
.item {
background-color: tomato;
padding: 20px;
margin-right: 20px;
flex: 1;
}

¿Existe una alternativa real de Flexbox CSS a mi propiedad de number hipotético que puede controlar cuántos elementos mostrar por fila?

La cuadrícula flotante era útil porque podías colocar .items ilimitados por cada .row debido al width . Pero con Flexbox tengo que usar soluciones como numerosas clases .row para controlar el diseño y el número de elementos con ancho diferente. He tenido suerte hasta ahora, pero hay cierto tipo de diseño que fallará con tal enfoque.

Enlace Codepen para demostrar

Answer 1

Tuve que deshacerme del margen alrededor de los bloques, porque los anchos de porcentaje son difíciles de aplicar limpiamente a los elementos con márgenes, pero puedes ver los cambios en http://codepen.io/anon/pen/jPeLYb?editors=110 :

@mixin max-width($width) {
@media screen and (max-width: $width) {
@content;
}
}
.container {
position: relative;
display: flex;
flex-flow: row wrap;
}
.item {
background-color: tomato;
box-sizing: border-box;
padding: 20px;
outline: 2px solid blue;
flex: 1;
}
@include max-width(992px) {
.item {
flex-basis: 25%;
background-color: red;
}
}
@include max-width(640px) {
.item {
flex-basis: 50%;
background-color: green;
}
}

Las partes importantes aquí son:

• flex-flow: row wrap que permite que el flexbox aparezca en varias filas (el predeterminado es nowrap )

• flex-basis que es el equivalente de width en este caso

• position: relative que hace que los anchos sean relativos al contenedor, en lugar del cuerpo (esto arruinaría el redondeo)