Почему блоки не встают 2 в ряд flex?

Question

[Артем Колчин]

Банальный вопрос, но не пойму почему gap учитывается в ширине блоков flex и они не встают 2 в ряд а переносятся на новый ряд.

Понятно что можно прописать calc но, по идее gap не должен учитываться в подсчете ширины блоков.

Comments

[Kentavr16]

У тебя ширина всех блоков 100 процентов

[Артем Колчин]

Kentavr16, даже если сделать

width:100;
max-width:50%;

Это не решает проблему.

[Kentavr16]

Вот так хотел поставить?
И у тебя опечатка в свойстве высоты.

[Ankhena]

но не пойму почему gap учитывается в ширине блоков flex

Проценты ширины во флексах считаются от родителя.
Итого 50% + 50% + gap = не влезут в родителя.

Можно: использовать calc при расчете ширины или заменить флекс на грид.

[Kentavr16]

гап добавляется, и при втором и третьем элементах в 50 процентов их суммарная ширина больше 100%, поэтому элемент будет переноситься. Либо уменьшай ширину, либо используй не 50% а как в моем примере flex:1 для указания элементу занимать всю доступную ширину.

[Kentavr16]

Артем Колчин,

Это не решает проблему.

и не должно. Ты говоришь стилям "этот элемент должен занимать 100(единицы даже не указаны) ширины, но не больше 50% родителя". Есть ли в этом логика думай сам.