Переключатель flexbox шириной до 50% при наличии 4 дочерних элементов

Question

Я пытаюсь использовать flexbox для настройки отображения сетки изображений. Все работает, и макет выглядит хорошо, за исключением случаев, когда у меня есть 4 изображения.

Это мой текущий код для изображений

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; 
} 

Есть ли способ, что я могу увеличить ширину до 50% при 4 .Field-элементы присутствуют? Опять же, я хочу, чтобы 50% имели место, когда есть 4 изображения.

Демо можно найти здесь на codepen: Demo

Answer 1

Вы можете добиться этого с помощью родного брата рассчитывать, что довольно рад, если вы никогда не использовали его раньше. Возможно, вы уже знакомы с псевдоклассом :nth-child, который позволяет вам выбрать что-то, основанное на его позиции в списке детей.

Входит :nth-last-child. Различие между ними состоит в том, что nth-child относится к nth child считая от вершины (т.е. ребенок, который имеет N-1 элементов перед ним) в то время как nth-last-child относится к nth child считая от дна (то есть, ребенок, который имеет n-1 элементов после него!). (Original | Follow-up)

Используя счетчик родственный, вы можете увеличить ширину вашего .field-item, когда он имеет 4 вещи, как так:

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

CodePen