Flex: пропорциональное сжатие

Flex: пропорциональное сжатие#

Чтобы блоки .flexbox и .flex-item пропорционально сжимались вместе с экраном, вам нужно внести изменения в свойства ширины и убрать фиксированное ограничение в родительском блоке .wrapper.

Ваша текущая проблема заключается в том, что .wrapper имеет фиксированную ширину 1440px, что мешает всей структуре реагировать на изменение размера окна браузера.

Вот как можно это исправить и добиться желаемого эффекта:

Изменения для пропорционального сжатия#

1. Уберите фиксированную ширину у .wrapper#

Установите ширину .wrapper на 100% или используйте max-width и width: 100%, чтобы блок занимал всю доступную ширину, но не превышал заданный предел (если нужно). Если вы хотите, чтобы он всегда подстраивался под окно, просто используйте width: 100% или вообще уберите это свойство, так как div по умолчанию блочный элемент и занимает всю доступную ширину.

Измените:

.wrapper {
  /* width: 1440px; <-- Удалите или измените */
  width: 100%; /* Установите на 100% */
  /* ... остальные свойства */
}

2. Используйте единицы vw для сохранения пропорций#

Единица vw (viewport width) означает 1% ширины области просмотра (окна браузера). Использование vw для размеров (например, height или margin) позволит элементам масштабироваться вместе с окном.

Поскольку .flexbox уже имеет width: 100%, он будет реагировать на ширину своего родителя (.wrapper). А так как .flex-item имеет flex: 1, он уже пропорционально делит доступное пространство внутри .flexbox.

Для более явного масштабирования всего блока .flexbox относительно окна, вы можете использовать vw для его высоты и/или отступов:

Пример изменений в CSS:

  .wrapper {
    /* Удаляем фиксированную ширину, чтобы он реагировал на размер экрана */
    /* width: 1440px; */ 
    width: 100%; /* Занимает всю ширину окна */
    max-width: 1440px; /* Опционально: ограничивает максимальную ширину */
    background-color: blue;
    height: 100vh; /* Хорошо, что уже используете vh */
    margin: 0 auto;
    display: flex;
    justify-content: center; /* Центрирование flexbox, если wrapper имеет max-width */
  }

  .flexbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: lime;
    /* Используем vw для высоты, чтобы она масштабировалась с шириной окна */
    height: 30vw; /* Например, высота 30% от ширины окна */ 
    width: 90%; /* Или 90vw, чтобы ширина тоже была привязана к окну */
    margin: 5vw 0 0; /* Отступы тоже привязаны к ширине окна */

    border: #1D1B1C 2px solid;
  }

  .flex-item {
    /* Удаляем width: 100%, так как flex: 1 уже это делает */
    /* width: 100%; */
    height: 100%;
    display: flex;
    /* flex: 1; - Это ключ к пропорциональному распределению внутри .flexbox */
    flex: 1; 
  }

Ключевые моменты#

  1. width: 100% или max-width на .wrapper: Это устраняет жесткое ограничение и позволяет контейнеру реагировать на изменения размера окна.

  2. flex: 1 на .flex-item: Это гарантирует, что каждый дочерний элемент .flex-item займет равную часть доступного пространства (1/3 в вашем случае) внутри .flexbox, и они будут сжиматься/растягиваться вместе с ним.

  3. Единицы vw: Использование vw для размеров, отступов или шрифтов (если нужно, с использованием функции clamp()) связывает их напрямую с шириной окна, обеспечивая пропорциональное масштабирование всего макета.

Contents