0

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) скин

10
  • добавьте в вопрос весь код, который воспроизводит проблему.
    – TaniaLinn
    27 авг 2022 в 14:57
  • надеюсь вам подойдет ссылка на репозиторий github.com/M0nday0001/supabase
    – Andrew
    27 авг 2022 в 15:00
  • "Нужно ограничить элементы в подвале по ширине" - кто такой этот ваш подвал?
    – ΝNL993
    27 авг 2022 в 15:04
  • 1
    @Andrew не подойдёт, минимальная воспроизводимая проблема должна быть прямо в вопросе. Подробнее о том как создать Как создать минимальный, самодостаточный и воспроизводимый пример в справке.
    – ΝNL993
    27 авг 2022 в 15:07
  • когда я добавляю вашему .rectangle__card свойство max-width: 280px нигде justify-content: space-between не перестает работать, шапка как была, такой и остается. Проблема не воспроизводится.
    – TaniaLinn
    27 авг 2022 в 15:12

1 ответ 1

0

Так вас беспокоит не space-between, а то что родительский блок уменьшается по ширине? Это потому что вы задали ему только max-width, он знает только верхнее ограничение, а нижнего нет. Вот он и уменьшается до размеров своего содержимого. Задайте ему min-width и он меньше минимально указанной ширины уже не станет. – TaniaLinn 27 авг в 15:31

Спасибо еще раз за ответ

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.