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

правити

Порада

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

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

Порада

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

element.style.flexBasis = "calc(100% - 20px)";

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

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

Синтаксис

element.style.flexBasis

Переглядачі

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

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

Переглядач
	29	22	9	12.1	12	11

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

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

Приклади

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

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

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

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

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();