Если элемент один в строке, растянуть на всю ширину?

Question

[Ivan1331]

Подскажите как реализовать такое: есть контейнер с айтемами содержащие картинки и описание, мне нужно что бы они располагались по 3 в строке (ширина по 30%), но если в строке только 1 айтем, то он должен иметь ширину 100%, если айтемов 2 то по 50%.

Comments

[Артём]

min-width: 30%

[Ankhena]

https://jsfiddle.net/r12abe07/
Это, понятно не 30% ширина, потому что лень возится с отступами и gap с флексами не всюду работает. Тут речь про flex-grow.

Answer 1

[Ivan1331]

Я извиняюсь, походу переработал, забыл про flex-grow. Если кому то понадобится:

.container{
    display: flex ;
    flex-wrap: wrap;
    justify-content: center;
}
.item{
    margin-right: 15px;
    width: 30%;
    margin-bottom: 15px;
    flex-grow: 1; 
}

Comments

[Ankhena]

!important
important-то зачем в свой же код засовывать?
Да ещё и в решение?

[Ivan1331]

Ankhena, перебивал стили плагина, поправил. Спасибо за gap, не знал о таком свойстве

[Ankhena]

Ivan1331, если плагина, то ок.

gap не в гридах, к сожалению, пока только для песочницы и в мечтах https://caniuse.com/?search=gap