css.in.ua
Підтримати

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 надає розробникам простий та ефективний спосіб керування простором та вирівнюванням елементів у контейнері, забезпечуючи гнучкість та адаптивність дизайну.

Порада:

Використання цієї властивості дозволяє створювати адаптивні макети, які динамічно змінюються в залежності від розміру контейнера.
Порада:

Flexbox є потужним інструментом для створення складних макетів без необхідності використання float або інших старих методів вирівнювання.
Порада:

Властивість element.style.flex є скороченням для flex-grow, flex-shrink і flex-basis, що робить код компактнішим і легшим для читання.

Синтаксис

element.style.flex

Значення

Return

Переглядачі

Переглядач

1

1

3

8

12
Переглядач

4.4

18

4

1
Переглядач

-

-

Приклади


У цьому прикладі користувач може налаштовувати пропорції росту другого елемента у flex-контейнері за допомогою повзунка. Значення повзунка змінюється в режимі реального часу, дозволяючи спостерігати зміни розмірів елементів без перезавантаження сторінки. Це допомагає зрозуміти, як властивість element.style.flex може бути використана для створення адаптивних макетів з динамічними елементами.

У цьому прикладі три елементи спочатку мають однаковий розмір всередині flex-контейнера. Натискання на кнопку змінює значення flex для другого елемента, дозволяючи йому займати більше місця. Це корисно для створення інтерфейсів з динамічною зміною розмірів елементів залежно від дій користувача.

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';
});

У цьому прикладі створюється галерея з чотирма зображеннями, які адаптуються до ширини контейнера завдяки властивості flex. Натискання на кнопку змінює значення flex для першого зображення, дозволяючи йому займати більше місця і ставати більшим. Це корисно для створення адаптивних макетів, де певні елементи повинні змінювати свої розміри залежно від наявного простору та взаємодії користувача.

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';
});

Спільнота

Зв'язок