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` повинно бути числом або рядком, що представляє число. Встановлення нечислових значень призведе до того, що браузер проігнорує цю властивість.
Нотатка:	Якщо `flexShrink` не встановлено, використовується значення за замовчуванням, яке дорівнює `1`.
Нотатка:	Змінення `flexShrink` впливає тільки на елементи, які є дочірніми елементами контейнера з дисплеєм flex (встановленим через `display: flex`). Використання властивості на елементі, який не є дочірнім flex-контейнера, не матиме ніякого ефекту.

Синтаксис

element.style.flexShrink

Значення

Return

Переглядачі

Переглядач
	1	1	3	8	12

Переглядач
	4.4	18	4	1

Переглядач
	-	-

Приклади

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


  See the Pen <a href="https://codepen.io/css_in_ua/pen/MWdNENW">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

У цьому прикладі ми динамічно налаштовуємо властивість flexShrink для елементів у flex-контейнері залежно від його ширини. Якщо ширина контейнера менше 500 пікселів, елементи можуть зменшуватись; якщо більше – зменшення вимкнено. Це корисно для адаптивних макетів, де потрібно змінювати поведінку елементів при різних розмірах вікна.

// Отримуємо доступ до контейнера та його дочірніх елементів
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();

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

// Отримуємо доступ до кнопки та 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);

JS довідник

JavaScript

Наповнення JS розділу