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

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

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

Властивість flexShrink є частиною моделі flexbox у CSS і задає коефіцієнт зменшення для елемента. За замовчуванням вона має значення 1, що означає, що елемент може зменшуватися з однаковою швидкістю з іншими елементами у flex-контейнері. Якщо значення flexShrink встановлено в 0, елемент не буде зменшуватись.

Для того, щоб змінити або отримати значення властивості flexShrink у JavaScript, ви можете використовувати element.style.flexShrink. Це дозволяє динамічно змінювати поведінку flex-елементів.

Приклад використання

// Припустимо, що у нас є елемент з id "myElement"
var myElement = document.getElementById("myElement");

// Встановлюємо значення flexShrink для елемента
myElement.style.flexShrink = "2";

// Отримуємо значення flexShrink для елемента
var flexShrinkValue = myElement.style.flexShrink;
console.log(flexShrinkValue); // Виведе "2"

У цьому прикладі ми спочатку отримуємо доступ до елемента з id myElement, потім встановлюємо значення flexShrink на 2. Це означає, що цей елемент буде зменшуватись у два рази швидше, ніж елементи зі значенням flexShrink, рівним 1. Потім ми отримуємо значення flexShrink і виводимо його в консоль.

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

правити

Нотатка

Значення flexShrink повинно бути числом або рядком, що представляє число. Встановлення нечислових значень призведе до того, що браузер проігнорує цю властивість.

автор: Bond правити

Нотатка

Якщо flexShrink не встановлено, використовується значення за замовчуванням, яке дорівнює 1.

автор: Bond правити

Нотатка

Змінення flexShrink впливає тільки на елементи, які є дочірніми елементами контейнера з дисплеєм flex (встановленим через display: flex). Використання властивості на елементі, який не є дочірнім flex-контейнера, не матиме ніякого ефекту.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.style.flexShrink

Переглядачі

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

Підтримка: стаціонарні переглядачі

Переглядач
	29	20	9	12.1	12	10

Підтримка: мобільні переглядачі

Переглядач
	4.4	29	20	9

Приклади

+ запропонувати свій приклад у пісочниці

<div id="flexContainer">Демонстраційний елемент</div>

// Отримуємо доступ до контейнера та його дочірніх елементів
var container = document.getElementById("flexContainer");
var items = container.children;

// Функція для динамічного встановлення flexShrink в залежності від ширини контейнера
function adjustFlexShrink() {
    var containerWidth = container.offsetWidth;

    for (var i = 0; i < items.length; i++) {
        if (containerWidth < 500) {
            items[i].style.flexShrink = "1";
        } else {
            items[i].style.flexShrink = "0";
        }
    }
}

// Викликаємо функцію при зміні розміру вікна
window.addEventListener("resize", adjustFlexShrink);

// Викликаємо функцію при завантаженні сторінки
adjustFlexShrink();

<div id="toggleShrink">Демонстраційний елемент</div>
<div id="item1">Демонстраційний елемент</div>
<div id="item2">Демонстраційний елемент</div>

// Отримуємо доступ до кнопки та flex-елементів
var toggleButton = document.getElementById("toggleShrink");
var flexItem1 = document.getElementById("item1");
var flexItem2 = document.getElementById("item2");

// Початкові значення flexShrink
var shrinkEnabled = false;

// Функція для перемикання flexShrink
function toggleFlexShrink() {
    if (shrinkEnabled) {
        flexItem1.style.flexShrink = "0";
        flexItem2.style.flexShrink = "0";
    } else {
        flexItem1.style.flexShrink = "1";
        flexItem2.style.flexShrink = "2";
    }
    shrinkEnabled = !shrinkEnabled;
}

// Додаємо обробник події для кнопки
toggleButton.addEventListener("click", toggleFlexShrink);