Назад Вперед Зміст

Flexbox

Переклад статті «How Flexbox works — explained with big, colorful, animated gifs»

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

Протягом тривалого часу єдиними надійними інструментами CSS-верстки були такі методи, як Float (обтікання) та позиціонування.

За їх допомогою складно або неможливо досягти таких простих вимог до макету:

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

Flexbox значно спрощує роботу з макетами.

Довідник з властивостей FLEXBOX

• Основи та термінологія. Display: Flex
• Flex Direction, flex-wrap
• Властивість Justify Content
• Властивості Align Items, Order
• Align Self
• Вкладені flex-блоки. Спливаючі підказки.

Практична робота 14

Назад Вперед Зміст