👩‍💻 Автоматическое определение направления флекса по размеру контейнера

Реализуйте функцию autoFlexDirection(container, threshold = 600), которая динамически меняет направление флекса (row или column) у заданного контейнера в зависимости от его ширины.

Если ширина контейнера меньше threshold пикселей — флекс-направление должно быть column, иначе — row.

Изменение должно происходить в реальном времени при ресайзе окна, без перезагрузки страницы и без использования CSS-медиа-запросов

Решение задачи🔽

function autoFlexDirection(container, threshold = 600) {
function updateFlex() {
const width = container.offsetWidth;
container.style.flexDirection = width < threshold ? 'column' : 'row';
}

// Вызываем при старте
updateFlex();

// Обновляем при каждом ресайзе окна
window.addEventListener('resize', updateFlex);

// Для случаев, когда контейнер сам меняет размер (не окно)
const observer = new ResizeObserver(updateFlex);
observer.observe(container);
}

// Пример использования:
const container = document.querySelector('.flex-container');
autoFlexDirection(container, 700);