Як працює CSS Flexbox

Наочний вступ до системи компонування елементів на вебсторінці

CSS Flexbox — це технологія створення складних гнучких макетів через правильне розміщення елементів на сторінці. Тут пояснюються можливості CSS Flexbox з використанням анімованих зображень

1. display: flex
2. flex-direction
3. justify-content
4. align-items
5. align-self
6. flex-basis
7. flex-grow
8. flex-shrink
9. flex
10. Додатково ТУТ оригінал https://tproger.ru/translations/how-css-flexbox-works

display: flex

Є сторінка:

Бачимо на ній чотири різнокольорові блоки div (так у html зазвичай маркують контейнери чи то блоки) різних розмірів, які розміщені всередині сірого div. Кожен із кольорових блоків (div-ів) переймає на себе властивість display: block, яку задає їм батьківський блок (div) з ідентифікатором #container Тому кожен блок займає всю ширину рядка і вони стандартно послідовно розміщуються один під одним. Ще раз! За це відповідає властивість display: block. Щоб почати працювати з CSS Flexbox, потрібно зробити батьківський блок flex-контейнером. Робиться це так :

#container { display: flex; } 

(пересвідчитися, як працюють усі наступні команди, змінюючи їх самостійно, ви можете тут)

Отак у блоків з'явилася флексова властивість, яка надалі дозволить ними керувати набагато простіше, ніж з використанням стандартного CSS.

flex-direction

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

За замовчуванням усі предмети розміщуються вздовж головної осі – зліва направо. Саме тому блоки в попередньому прикладі вишикувалися в лінію, коли ми застосували display: flex. А ось flex-direction дає змогу обертати головну вісь.

#container {
  display: flex;
  flex-direction: column;
}

Зверніть увагу, що flex-direction: column не вирівнює блоки по осі, перпендикулярній головній. Головна вісь сама змінює своє розташування, і тепер спрямована зверху вниз.

Є ще двійко властивостей для flex-direction: row-reverse і column-reverse.

justify-content

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

#container { 
display: flex; 
flex-direction: row; 
justify-content: flex-start; 
}

Justify-content може набувати 6 значень:

1. flex-start
2. flex-end
3. center
4. space-between
5. space-around
6. space-evenly (цю властивість не відображено на ілюстрації, але ви можете її випробувати)

Space-between задає однакову відстань між блоками, але не між контейнером та блоками. Space-around також задає однакову відстань між блоками, але тепер відстань між контейнером та блоками дорівнює половині відстані між блоками. Space-evenly зробить як однакові відстані між самими блоками, так і відступ першого і останнього блока від батьківського контейнера.

align-items

Якщо justify-content працює з головною віссю, то align-items працює з віссю, перпендикулярною до головній осі. Повернемося до flex-direction: row і пройдемося по командах align-items:

1. flex-start
2. flex-end
3. center
4. stretch
5. baseline

Варто зауважити, що для align-items: stretch висота кольорових блоків повинна дорівнювати auto. При цьому висота блока #container має бути сталою, наприклад 450px. Для align-items: baseline теги параграфа прибирати не потрібно, інакше вийде так:

Щоб краще розібратися в тому, як працюють осі, об'єднаємо justify-content з align-items і подивимося, як працює вирівнювання по центру для двох властивостей flex-direction:

align-self

дає змогу вирівнювати елементи поокремо:

#container {
  align-items: flex-start;
}
.square#one {
  align-self: center;
}
// Тільки ці квадрати будуть відцентровані.

Для двох блоків застосовано align-self, а для решти — align-items: center і flex-direction: row.