Responsive Flexbox Raster für 3-5 Artikel

Question

Hier ist einfach CSS, die ich habe es geschafft, verarbeitbar einfach ansprechende Gitter (a plunker) zu machen:

.flex { 
    display: flex; 
    flex-direction: column; 
    flex-wrap: wrap; 
} 

.flex > * { 
    flex-grow: 1; 
    /* drives IE11 crazy for some reason */ 
    /*flex-basis: 0;*/ 
    padding: 20px; 
} 

@media screen and (min-width: 600px) { 
    .flex { 
    flex-direction: row; 
    } 

    .flex > * { 
    flex-basis: calc(50% - 40px); 
    } 
} 

@media screen and (min-width: 992px) { 
    .flex { 
    flex-direction: row; 
    } 

    .flex > * { 
    flex-basis: calc(25% - 40px); 
    } 
} 

für bestimmte Haltepunkte es macht den Job für 4 Einzelteile:

1 + 1 + 1 + 1

2 + 2

Und für 3 Artikel:

1 + 1 + 1

2 + 1

für 5 Einzelteile es gibt mir:

1 + 1 + 1 + 1 + 1

2 + 2 + 1

4 + 1

Es entspricht flex-basis, aber ich würde

3 + 2

für das bekommen letzter Haltepunkt

Wie kann ich dieses CSS für 5 Elemente als 3 + 2 am letzten Haltepunkt arbeiten lassen (3 Elemente in der ersten Zeile, 2 Elemente in der zweiten Zeile)?

Answer 1

Geben Sie den ersten drei Flex-Elementen eine Breite von 33%.

Geben Sie den letzten zwei Flex-Elementen eine Breite von 50%.

In einem row wrap Container verbrauchen die ersten drei das gesamte Leerzeichen in der Zeile, wodurch die verbleibenden Elemente in die nächste Zeile gezwungen werden.

@media screen and (min-width: 992px) { 

    .flex { 
    flex-direction: row; 
    } 

    .flex > *:nth-child(-n + 3) { 
    flex-basis: calc(33.33% - 40px); 
    } 

    .flex > *:nth-last-child(-n + 2) { /* see note below */ 
    flex-basis: calc(50% - 40px); 
    } 
} 

Die zweite flex-basis Regel kann (je nach Layout Ziele) optional sein. Sie können es auch auf flex: 1 setzen oder es sogar ganz weglassen. In allen Fällen nehmen die zwei Divs 50% der Reihe ein.

revised plunker