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)