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

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

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

element.style.flexBasis – це властивість CSS, яку можна використовувати в JavaScript для встановлення або отримання значення початкового розміру гнучкого елементу. Ця властивість визначає основний розмір елемента до того, як він буде розподілений між іншими гнучкими елементами в контейнері.

Властивість flexBasis визначає, який простір має займати елемент у контейнері до застосування будь-яких інших стилів, таких як flexGrow або flexShrink. Це може бути вказано як конкретне значення (наприклад, в пікселях, відсотках тощо) або автоматично визначено за вмістом (auto).

Для роботи з element.style.flexBasis потрібно мати на увазі, що ця властивість доступна тільки для гнучких елементів, тобто тих, які знаходяться в контейнері з display: flex або display: inline-flex.

Приклад використання element.style.flexBasis

  1. Встановлення значення flexBasis:

    const element = document.getElementById('myElement');
element.style.flexBasis = '200px';

    У цьому прикладі ми отримуємо доступ до елемента з id myElement і встановлюємо його початковий розмір у 200 пікселів.

  2. Отримання значення flexBasis:

    const element = document.getElementById('myElement');
const flexBasisValue = element.style.flexBasis;
console.log(flexBasisValue);

    Цей код отримує значення flexBasis для елемента і виводить його у консоль.

Важливі моменти

  • Одиниці виміру: Значення flexBasis може бути встановлено в різних одиницях виміру, таких як пікселі (px), відсотки (%), ем (em), рем (rem) тощо.
  • Автоматичне значення: Якщо flexBasis встановлено в auto, то розмір елемента буде визначатися його вмістом або іншими стилями, такими як width або height.

Приклади

Використання з відсотками:

const element = document.getElementById('myElement');
element.style.flexBasis = '50%';

Цей приклад встановлює початковий розмір елемента як 50% від розміру контейнера.

Використання з автоматичним значенням:

const element = document.getElementById('myElement');
element.style.flexBasis = 'auto';

Встановлення flexBasis в auto дозволяє елементу визначати свій розмір автоматично на основі вмісту або інших стилів.

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

Порада:

Під час роботи з комплексними макетами, зручно використовувати calc() для комбінування різних одиниць вимірювання у значенні flexBasis. Це дозволяє гнучко встановлювати розміри елементів, враховуючи різні фактори. Наприклад, element.style.flexBasis = "calc(100% - 20px)"; допомагає врахувати відступи або інші елементи інтерфейсу.

element.style.flexBasis = "calc(100% - 20px)";
Порада:

Комбінуйте flexBasis з іншими властивостями Flexbox, такими як flexGrow та flexShrink, для досягнення бажаного результату.

Синтаксис

element.style.flexBasis

Значення

Return

Переглядачі

Переглядач

1

1

3

8

12
Переглядач

4.4

18

4

1
Переглядач

-

-

Приклади


У цьому прикладі користувач може вводити різні значення для властивості flexBasis (наприклад, 200px, 50%) у текстове поле та натискати кнопку "Застосувати". Це змінить початковий розмір гнучкого елемента, демонструючи, як працює властивість flexBasis.

Цей приклад демонструє, як можна застосувати різні значення flexBasis до елементів у контейнері flex на основі їхньої позиції. Кожен парний елемент займає 30% простору, а непарний - 70%. Це корисно для створення асиметричних макетів, де елементи повинні займати різні пропорції простору.

const container = document.getElementById('container');
const items = container.children;

for (let i = 0; i < items.length; i++) {
  if (i % 2 === 0) {
    items[i].style.flexBasis = '30%';
  } else {
    items[i].style.flexBasis = '70%';
  }
}

Цей приклад показує, як динамічно змінювати значення flexBasis залежно від розміру контейнера. Якщо ширина контейнера перевищує 600 пікселів, елементи займають третину простору з відступом, в іншому випадку - половину простору. Це корисно для створення адаптивних макетів, які автоматично підлаштовуються під розміри вікна браузера.

const container = document.getElementById('dynamicContainer');
const items = container.children;

function updateFlexBasis() {
  const containerWidth = container.clientWidth;
  for (let item of items) {
    item.style.flexBasis = containerWidth > 600 ? 'calc(33.33% - 20px)' : 'calc(50% - 10px)';
  }
}

window.addEventListener('resize', updateFlexBasis);
updateFlexBasis();

Спільнота

Зв'язок