style.flex в JavaScript — розтягування flex-елемента

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

element.style.flex - це властивість CSS, яка дозволяє керувати гнучким (flexible) елементом у контейнері з використанням Flexbox layout. Ця властивість об'єднує три індивідуальні властивості: flex-grow, flex-shrink і flex-basis.

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

Щоб використовувати element.style.flex, спершу потрібно отримати доступ до елемента, який є дочірнім до контейнера з display: flex;. Це можна зробити за допомогою методів, таких як document.getElementById, document.querySelector або будь-яких інших способів вибору елементів у DOM.

// Отримуємо елемент за його id
let element = document.getElementById('myElement');

// Застосовуємо властивість flex
element.style.flex = '1 0 auto';

Параметри

1. flex-grow: визначає здатність елемента рости. Значення є числом, що визначає, скільки вільного простору всередині контейнера буде віддано цьому елементу порівняно з іншими елементами.

   element.style.flex = '2'; // Елемент росте вдвічі більше, ніж інші елементи
   

2. flex-shrink: визначає здатність елемента стискатися. Значення є числом, що визначає, наскільки елемент буде стискатися у порівнянні з іншими елементами при нестачі місця.

   element.style.flex = '1 1 auto'; // Елемент буде стискатися, якщо не вистачає місця
   

3. flex-basis: визначає базовий розмір елемента перед тим, як будуть застосовані властивості flex-grow та flex-shrink. Значення може бути фіксованим (наприклад, 100px) або автоматичним (auto).

   element.style.flex = '1 0 50px'; // Базовий розмір елемента 50px, він може рости, але не буде стискатися
   

Приклади

1. Просте вирівнювання: якщо вам потрібно, щоб всі елементи всередині flex-контейнера мали однаковий розмір, можна задати flex як 1.

   let items = document.querySelectorAll('.flex-item');
   items.forEach(item => {
       item.style.flex = '1';
   });
   

2. Зміна порядку пріоритету: для елементів, які повинні займати більше місця, можна встановити більше значення flex-grow.

   let mainItem = document.getElementById('mainItem');
   mainItem.style.flex = '2'; // Головний елемент росте вдвічі більше, ніж інші
   

3. Фіксований базовий розмір: якщо деякі елементи повинні мати фіксований базовий розмір, але при цьому можуть рости або стискатися, використовуйте flex-basis.

   let fixedItem = document.getElementById('fixedItem');
   fixedItem.style.flex = '1 1 100px'; // Фіксований базовий розмір 100px
   

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

правити

Порада

Властивість element.style.flex є скороченням для flex-grow, flex-shrink і flex-basis, що робить код компактнішим і легшим для читання.

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

Порада

Використання цієї властивості дозволяє створювати адаптивні макети, які динамічно змінюються в залежності від розміру контейнера.

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

Порада

Flexbox є потужним інструментом для створення складних макетів без необхідності використання float або інших старих методів вирівнювання.

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

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

Синтаксис

element.style.flex

Переглядачі

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

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

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

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

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

Приклади

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

<header>
  <h2 class="title">element.style.flex</h2>
  <p class="description">Задає, як елемент буде рости або скорочуватися всередині контейнера flex.</p>
</header>
<main>
  <div class="result">
    <div>
      <label for="flexRange">Змінити пропорції Елемент 2:</label>
      <input type="range" id="flexRange" name="flexRange" min="1" max="5" value="1">
    </div>
    <div id="flexContainer">
      <div class="flexItem" id="item1">Елемент 1</div>
      <div class="flexItem" id="item2">Елемент 2</div>
      <div class="flexItem" id="item3">Елемент 3</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);
}

#flexContainer {
  display: flex;
  gap: 10px;
}

.flexItem {
  flex: 1;
  padding: 20px;
  background-color: #e2e2e2;
  text-align: center;
  -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);
}

const flexRange = document.getElementById('flexRange');
const item2 = document.getElementById('item2');

flexRange.addEventListener('input', () => {
  const flexValue = flexRange.value;
  item2.style.flex = flexValue;
});
//# sourceURL=pen.js

<img src="/img/logo.svg" width="100" alt="Демо">

let gallery = document.createElement('div');
gallery.style.display = 'flex';
gallery.style.flexWrap = 'wrap';
gallery.style.width = '100%';

for (let i = 1; i <= 4; i++) {
    let img = document.createElement('img');
    img.src = photo(i);
    img.style.flex = '1 1 150px';
    img.style.margin = '10px';
    gallery.appendChild(img);
}

document.body.appendChild(gallery);

let enlargeButton = document.createElement('button');
enlargeButton.innerText = 'Збільшити перше зображення';
document.body.appendChild(enlargeButton);

let firstImage = gallery.querySelector('img');

enlargeButton.addEventListener('click', () => {
    firstImage.style.flex = firstImage.style.flex === '1 1 150px' ? '2 1 300px' : '1 1 150px';
});

// — службове: замість чужих фотографій картинки збираються просто тут —
function photo(n) {
    const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'>`
        + `<rect width='150' height='150' fill='hsl(${n * 60} 65%25 55%25)'/>`
        + `<text x='75' y='97' font-size='64' text-anchor='middle' fill='%23fff'>${n}</text></svg>`;

    return `data:image/svg+xml,${svg}`;
}

let container = document.createElement('div');
container.style.display = 'flex';
container.style.width = '100%';

let item1 = document.createElement('div');
item1.style.flex = '1';
item1.innerText = 'Елемент 1';

let item2 = document.createElement('div');
item2.style.flex = '1';
item2.innerText = 'Елемент 2';

let item3 = document.createElement('div');
item3.style.flex = '1';
item3.innerText = 'Елемент 3';

container.appendChild(item1);
container.appendChild(item2);
container.appendChild(item3);
document.body.appendChild(container);

let button = document.createElement('button');
button.innerText = 'Змінити розмір Елемент 2';
document.body.appendChild(button);

button.addEventListener('click', () => {
    item2.style.flex = item2.style.flex === '1' ? '2' : '1';
});