Почему флексы выравниваются непонятно как?

Question

[germankraut]

Почему между верхними и нижними(перенесенными простым flex wrapom) отступы стали такими огромными? Почему они не под ними же?

Comments

[dollar]

Верните содержимое вопроса плиз. Теперь он принадлежит не только автору.

[Модератор]

germankraut Читаем п. 4.2 регламента работы сервиса и либо задумываемся, либо перестаём пользоваться сервисом.

Answer 1

[Ankhena]

Потому что вы задали высоту. Почитайте про align-items и align-content.

Comments

[germankraut]

я в курсе про эти свойства. Так почему из за высоты такие отступы появляются? Я не понимаю этого логически, ну есть границы четкие, почему из за них дивы таким образом выравниваются

[Ankhena]

germankraut, да, четкие границы.
Есть блок.
В нем 2 строки.
Каждая строка по 50% высоты.
Высота элементов задана.
Значит элементы прибиты к верху каждой из строк.

я в курсе про эти свойства.

Тогда мне как-то даже неловко за столь подробное разъяснение.

[Ankhena]

germankraut,
вам там скучно?

[germankraut]

Ankhena, Я все равно ничего не понимаю. Почему высота 50%? Какие 2 строки вы имеете ввиду? В тегах с параграфами? Я не понимаю почему отступы появляются.

[Ankhena]

germankraut,
Ну давайте по порядку.
В сколько строк у вас на скрине располагаются итемы?

[germankraut]

Ankhena, В 2. Почему 50%?

[Ankhena]

germankraut, потому что ячейки одинаковой высоты, значит, строки поделятся в равных пропорциях. А 100% пополам это 50%

[Ankhena]

germankraut, уберите высоту у дочерних. Stretch их растянет на всю высоту строки. Наверное, станет понятнее, что там со строками.

[germankraut]

Ankhena,

Каждая строка по 50% высоты.

Какой высоты? Line-height, margin top, padding top? Что именно? Я не понимаю.
Почему 50%?????????

[Ankhena]

germankraut, высота флекс строки. 50% от высоты (в данном случае, при горизонтальной главной оси) родителя.

Почему 50% написала выше и не вижу нужды переписывать второй раз.

Но повторю это: уберите высоту у item. Будет видно сколько занимает флекс строка.

Или уменьшайте ширину окна, чтобы было 3, 4, 5 строк и смотрите как будут себя вести элементики.

Ну или изменяйте align-content.
Думаю, что вы хотите flex-start.

Я не очень понимаю как при этом можно говорить, что вы знаете align-items и align-content. Я бы рекомендовала освежить знания.

[germankraut]

Ankhena, я ненавижу css

[Ankhena]

germankraut, воспринимать это как спасибо за разъяснения?

Зачем редактировать вопрос? Ведь и он и ответ могут пригодится кому-то ещё.
Вы не думали об этом?

я ненавижу css

А это вообще...
Тут вроде взрослые люди.
Сначала хотите разобраться, потом говорите, что знаете свойства, а потом вот это вот.