Schalten Sie die Flexbox-Breite auf 50% um, wenn 4 untergeordnete Elemente vorhanden sind.

Question

Ich versuche mit der flexbox eine Rasteranzeige von Bildern einzurichten. Alles funktioniert, und das Layout sieht gut aus, außer wenn ich 4 Bilder habe.

Dies ist mein aktueller Code für die Bilder

section.flex-container .field-items { 
    display: flex; 
    justify-content: center; 
    flex-wrap: wrap-reverse; 
    align-items: stretch; 
} 
section.flex-container .field-items .field-item { 
    display: inline; 
    flex-grow: 1; 
    width: 33%; 
    padding: 10px; 
} 

Gibt es eine Möglichkeit, dass ich die Breite auf 50% erhöhen kann, wenn 4 .field-Elemente vorhanden sind? Wieder möchte ich nur, dass die 50% auftreten, wenn es 4 Bilder gibt.

Eine Demo finden Sie hier auf codepen finden: Demo

Answer 1

Sie können dies über erreichen Geschwister zählen, das ist ziemlich rad ist, wenn Sie es noch nie zuvor verwendet haben. Möglicherweise kennen Sie bereits die Pseudo-Klasse :nth-child, mit der Sie etwas anhand ihrer Position in einer Liste von untergeordneten Elementen auswählen können.

In kommt :nth-last-child. Der Unterschied zwischen den beiden ist, dass nth-child gilt für die nth child von oben gezählt (dh das Kind, das n-1-Elemente vor sich hat), während die nth-last-child gilt für die nth child von unten gezählt (dh das Kind, das hat n-1 Elemente nach!). (Original | Follow-up)

Mit der Geschwisterzahl, können Sie erhöhen die Breite Ihres .field-item, wenn es 4 Artikel hat wie so:

section.flex-container { 
    .field-items{ 
    .field-item { 
     &:first-child:nth-last-child(4), &:first-child:nth-last-child(4) + .field-item { 
     width:50%; 
     } 
    } 
    } 
} 

CodePen