HTML

Щоб почати працювати з CSS Flexbox, потрібно зробити контейнер flex-контейнером. Робиться

Flex-direction

У flex-контейнера є дві осі: головна і перпендикулярна їй.

За замовчуванням всі елементи розташовуються вздовж головної осі - зліва направо.

Зверніть увагу, що flex-direction: column НЕ вирівнює блоки по осі, перпендикулярній

justify-content

Відповідає за вирівнювання елементів по головній осі:

#container {
display: flex;
flex-direction:

Justify-content може приймати 5 значень:
flex-start
flex-end
center
space-between
space-around

Space-between задає однакову відстань між блоками, але

align-items

Якщо justify-content працює з головною віссю, то align-items працює з віссю,

Для align-items: baseline теги параграфа прибирати не потрібно, інакше вийде так:

Щоб

flex-basis

Відповідає за початковий розмір елементів до того, як вони будуть замінені

column-gap

Відповідає за відступи між елементами у flex-контейнері

row-gap

Відоповідає за відступи між рядками елементів які знаходяться всередині flex-контейнера

align-self

Дозволяє маніпулювати окремими дочірніми елементами. Зауважте, що align-self потрібно присвоювати НЕ

flex-basis впливає на розмір елементів вздовж головної осі. Подивимось, що станеться,

flex-grow

Визначає коефіцієнти зростання блоку. Для початку задамо блокам однакову ширину 120px.

За

Але що значить flex-grow: 1? Спробуємо зробити flex-grow рівним 999:

І ...

flex-shrink

Пряма протилежність flex-grow. Визначає, наскільки блоку можна зменшитися в розмірі. flex-shrink

Тепер поміняємо значення flex-shrink для третього блоку на 0. Йому заборонили

flex

Заміняє flex-grow, flex-shrink і flex-basis. Значення за замовчуванням: 0 (grow) 1

flex-wrap

За замовчуванням, якщо батьківський flex блок стискається, всі дочірні елементи так