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

<header>
  <h2 class="title">element.style.flexBasis</h2>
  <p class="description">Змінює початковий розмір гнучкого елемента</p>
</header>
<main>
  <div class="result">
    <!-- Форма для введення нового значення flexBasis -->
    <label for="flexBasisInput">Введіть значення flexBasis (наприклад, 200px, 50%):</label>
    <input type="text" id="flexBasisInput" placeholder="200px">
    <button id="applyButton">Застосувати</button>
    <br><br>
    
    <!-- Гнучкий контейнер -->
    <div class="flex-container">
      <div class="flex-item" id="flexItem">Гнучкий елемент</div>
    </div>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

.flex-container {
  display: flex;
  gap: 10px;
  background-color: #ddd;
  padding: 10px;
}

.flex-item {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  text-align: center;
  transition: all 0.3s ease;
}

document.getElementById('applyButton').addEventListener('click', function () {
  // Отримання введеного значення flexBasis
  const flexBasisValue = document.getElementById('flexBasisInput').value;

  // Отримання гнучкого елемента
  const flexItem = document.getElementById('flexItem');

  // Застосування нового значення flexBasis
  flexItem.style.flexBasis = flexBasisValue;
});
//# sourceURL=pen.js