JS властивість CSSStyleDeclaration.flex

Загальний опис

element.style.flex - це властивість CSS, яка дозволяє керувати гнучким (flexible) елементом у контейнері з використанням Flexbox layout. Ця властивість об'єднує три індивідуальні властивості: flex-grow, flex-shrink і flex-basis.

Властивість element.style.flex приймає до трьох значень, які визначають, як елемент буде рости, стискатися та яким буде його базовий розмір.

Щоб використовувати element.style.flex, спершу потрібно отримати доступ до елемента, який є дочірнім до контейнера з display: flex;. Це можна зробити за допомогою методів, таких як document.getElementById, document.querySelector або будь-яких інших способів вибору елементів у DOM.

// Отримуємо елемент за його id
let element = document.getElementById('myElement');

// Застосовуємо властивість flex
element.style.flex = '1 0 auto';

Параметри

1. flex-grow: визначає здатність елемента рости. Значення є числом, що визначає, скільки вільного простору всередині контейнера буде віддано цьому елементу порівняно з іншими елементами.

   element.style.flex = '2'; // Елемент росте вдвічі більше, ніж інші елементи
   

2. flex-shrink: визначає здатність елемента стискатися. Значення є числом, що визначає, наскільки елемент буде стискатися у порівнянні з іншими елементами при нестачі місця.

   element.style.flex = '1 1 auto'; // Елемент буде стискатися, якщо не вистачає місця
   

3. flex-basis: визначає базовий розмір елемента перед тим, як будуть застосовані властивості flex-grow та flex-shrink. Значення може бути фіксованим (наприклад, 100px) або автоматичним (auto).

   element.style.flex = '1 0 50px'; // Базовий розмір елемента 50px, він може рости, але не буде стискатися
   

Приклади

1. Просте вирівнювання: якщо вам потрібно, щоб всі елементи всередині flex-контейнера мали однаковий розмір, можна задати flex як 1.

   let items = document.querySelectorAll('.flex-item');
   items.forEach(item => {
       item.style.flex = '1';
   });
   

2. Зміна порядку пріоритету: для елементів, які повинні займати більше місця, можна встановити більше значення flex-grow.

   let mainItem = document.getElementById('mainItem');
   mainItem.style.flex = '2'; // Головний елемент росте вдвічі більше, ніж інші
   

3. Фіксований базовий розмір: якщо деякі елементи повинні мати фіксований базовий розмір, але при цьому можуть рости або стискатися, використовуйте flex-basis.

   let fixedItem = document.getElementById('fixedItem');
   fixedItem.style.flex = '1 1 100px'; // Фіксований базовий розмір 100px
   

Використання element.style.flex надає розробникам простий та ефективний спосіб керування простором та вирівнюванням елементів у контейнері, забезпечуючи гнучкість та адаптивність дизайну.

Синтаксис

element.style.flex

Значення

Return

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі
• Серверні переглядачі

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

let container = document.createElement('div');
container.style.display = 'flex';
container.style.width = '100%';

let item1 = document.createElement('div');
item1.style.flex = '1';
item1.innerText = 'Елемент 1';

let item2 = document.createElement('div');
item2.style.flex = '1';
item2.innerText = 'Елемент 2';

let item3 = document.createElement('div');
item3.style.flex = '1';
item3.innerText = 'Елемент 3';

container.appendChild(item1);
container.appendChild(item2);
container.appendChild(item3);
document.body.appendChild(container);

let button = document.createElement('button');
button.innerText = 'Змінити розмір Елемент 2';
document.body.appendChild(button);

button.addEventListener('click', () => {
    item2.style.flex = item2.style.flex === '1' ? '2' : '1';
});

let gallery = document.createElement('div');
gallery.style.display = 'flex';
gallery.style.flexWrap = 'wrap';
gallery.style.width = '100%';

for (let i = 1; i <= 4; i++) {
    let img = document.createElement('img');
    img.src = `https://via.placeholder.com/150?text=Image+${i}`;
    img.style.flex = '1 1 150px';
    img.style.margin = '10px';
    gallery.appendChild(img);
}

document.body.appendChild(gallery);

let enlargeButton = document.createElement('button');
enlargeButton.innerText = 'Збільшити перше зображення';
document.body.appendChild(enlargeButton);

let firstImage = gallery.querySelector('img');

enlargeButton.addEventListener('click', () => {
    firstImage.style.flex = firstImage.style.flex === '1 1 150px' ? '2 1 300px' : '1 1 150px';
});