Что то не так с flex?

Question

[Idwln]

Добрый! Извините, но в моём коде я совсем не понимаю, почему если я указываю флекс flex: 0 1 33.333%; то блок никак не меняется! Может я слепой, или не туда его задаю. Нужно чтобы было 3 карточки одинакового размера
https://codepen.io/idwln/pen/mdpZbGo

Comments

[xdevelx]

почему если я указываю флекс flex: 0 1 33.333%;

А display: flex; задавать не пробовали?

[Ankhena]

Нужно чтобы было 3 карточки одинакового размера

Для начала нужно вставить 3 карточки в разметку вместо одной.

Потом уточнить, у них должна быть одинаковая ширина или высота.
Потому что с одной стороны вы задаете flex-direction: column;, а с другой, не указываете высоту обертки и запретили flex-grow элементам.

В итоге:
Если речь про три в ряд: то нужно убрать про column.
Если про три в столбик, то проще перейти на гриды и единицы fr.

Answer 1

[Сергей delphinpro]

А как он должен меняться? Это единственный блок во флекс-контейнере с неуказанной высотой. Понятно, что он будет занимать всю высоту родителя. Или родитель будет подстраиваться по его высоту, тут уж как хотите думайте.
И, кстати, где там три карточки?

Comments

[Idwln]

Мне нужна наоборот ширина 33.33%. Три карточки можно создать просто скопировав html код 2 раза.

[Сергей delphinpro]

Idwln, вы кажется не поняли. Это вам нужно решение проблемы. Но вы не обозначили её наглядно. Было бы лучше оформить песочницу именно так как нужно, с тремя карточками, чтобы было видно, что у вас там не так.

Не в тему

, но: префиксы визуально засоряют код, отвлекают. Пора б и без них писать. Хотя бы в песочнице. Вряд ли на тостере сидят люди в IE11.

[Idwln]

Сергей delphinpro, Перепоставив flex в разные блоки я вроде как разобрался. Хочу сказать, что делаю из scss и сохраняю оттуда и возможно 5 версий назад многовато) Надо бы 3 поставить)

[Idwln]

Сергей delphinpro, Но не поверите, появилась другая проблема
https://codepen.io/idwln/pen/BaJgawL
Карточки с 33.33% начали залазить друг на друга, а не равномерно распределяться учитывая отступ gap в 36 px

[Сергей delphinpro]

Idwln,
flex: 0 1 33.33%

0 - это степень сжатия. нулевая, запрещено.
базовый размер 33,33%. Меньше ужать нельзя (из-за flex-shrink:0). Но учитывая гапы - ширина обязательно будет меньше.

Вы можете пересчитать ширину с учетом гапов:

.visit-card__block {
  flex: 0 1 calc(33.33% - 36px * 2 / 3);
}

.visit-cards {
  display: flex;
  justify-content: space-between;
  gap: 36px;
  flex-wrap: wrap;
}

Или можете использовать технику с margin/padding (популярный пример см. в сетке bootstrap)

Хотя я бы заверстал на гридах в три строки

.visit-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 36px;
}