Почему не работает space-between (justify-content)?
CSS
Есть блок body.
У body есть два items: header и footer.
В header есть два ребёнка.
А у footer три ребёнка.
И есть общий контейнер max-width: 1165px; height: 828px;
body {
display: flex;
flex-direction: column;
justify-content: space-between;
}
header {
display: flex;
flex-direction: row;
justify-content: space-between;
}
footer {
display: flex;
flex-direction: row;
justify-content: space-between;
}
Когда footer__item (три элемента внутри) я ограничиваю по ширине max-widht: 280px;
Общий контейнер становиться меньшим (>1165px).
И в header перестает работать свойство justify-content: space-between;
То есть два элемента прилегают друг к другу.
Когда убираю max-width: 280px; то три элемента заполняются свободное пространство (flex).
Нужно ограничить элементы в footer по ширине.
P.S. Если что могу дописать дополнительную информацию, или отправить полный HTML, CSS код.
для ответа на один из комментарий (TaniaLinn)
Ответы (1 шт):
Так вас беспокоит не space-between, а то что родительский блок уменьшается по ширине? Это потому что вы задали ему только max-width, он знает только верхнее ограничение, а нижнего нет. Вот он и уменьшается до размеров своего содержимого. Задайте ему min-width и он меньше минимально указанной ширины уже не станет. – TaniaLinn 27 авг в 15:31
Спасибо еще раз за ответ