Флекси

Оновлено: 20.01.2023

Флекси

Властивості для верстки веб-сторінок за допомогою флексів - гнучких елементів, які можуть розтягуватися або стискатися для заповнення собою доступного вільного простору.

  • align-content

    align-content

    Задає тип вирівнювання рядків усередині флекс-контейнера за поперечною віссю за наявності вільного простору.

  • align-items

    align-items

    Властивість align-items вирівнює флекс-елементи всередині контейнера в перпендикулярному напрямку.

  • align-self

    align-self

    Властивість align-self вирівнює флекс-елементи поточного рядка, переписуючи значення align-items.

  • flex

    flex

    Скорочена властивість, яка дозволяє вказати параметри елемента, щоб він ефективно заповнював доступний простір. Елементи можуть бути розтягнутими пропорційно з урахуванням заданого співвідношення або стиснутими так, щоб повністю вмістити всі елементи в один рядок без перенесення.

  • flex-basis

    flex-basis

    Властивість flex-basis визначає основу флексу, яка є початковим розміром елемента. Схоже на властивості width та height, до яких додається вміст елемента.

  • flex-direction

    flex-direction

    Властивість flex-direction задає напрямок основних вісей у контейнері, чим і визначає положення флексів у контейнері. На напрямок також впливає значення атрибута dir у контейнері.

  • flex-flow

    flex-flow

    Є скороченою властивістю окремих властивостей flex-direction та flex-wrap.

  • flex-grow

    flex-grow

    Визначає, скільки простору може займати флекс усередині контейнера. За значення беруться числа, вони задають пропорції кожного флексу. Наприклад, якщо для всіх елементів встановлено значення 1, всі вони вийдуть однакового розміру. Якщо якийсь елемент отримав значення 2, його розмір буде вдвічі більшим від інших.

  • flex-shrink

    flex-shrink

    Встановлює коефіцієнт стиснення флексів у контейнері та задає, наскільки елемент зменшуватиметься відносно інших флексів, щоб розмістити всі елементи в один рядок.

  • flex-wrap

    flex-wrap

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

  • justify-content

    justify-content

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

  • order

    order

    Визначає порядок виведення флексів усередині флекс-контейнера. Елементи розташовуються відповідно до значень властивості order від меншого до більшого. За рівних значень order елементи виводяться в тому порядку, в якому вони з'являються у вихідному коді.

  • place-content

    place-content

    Скорочена властивість place-content одночасно встановлює значення властивостей align-content і justify-content.