Модуль 1 · урок 4 з 14
Flexbox
Flexbox розкладає елементи вздовж однієї осі. Уся його логіка тримається на тому, що осей дві й вони мають різні назви: головна (вздовж якої йдуть елементи) і поперечна. Якщо тримати це в голові, решта властивостей стають очевидними.
flex-direction. justify-content завжди
керує головною віссю, align-items — поперечною, незалежно від того, куди вони дивляться.Властивості контейнера
.toolbar {
display: flex;
flex-direction: row; /* row | row-reverse | column | column-reverse */
justify-content: space-between; /* по головній осі */
align-items: center; /* по поперечній */
gap: 12px; /* відступи МІЖ елементами, без margin-хаків */
flex-wrap: wrap; /* дозволити перенос на новий рядок */
}Значення justify-content, які реально використовуються:
flex-start (за замовчуванням), center, space-between
(крайні по краях, проміжки рівні), flex-end.
Для align-items: stretch (за замовчуванням — усі однакової висоти),
center, flex-start, baseline (вирівняти по базовій лінії тексту).
Властивості елемента: що таке flex: 1
flex — це скорочення трьох властивостей, і саме через це воно здається магією.
.item {
flex-grow: 1; /* чи можна рости, коли є вільне місце (0 = ні) */
flex-shrink: 1; /* чи можна стискатись, коли місця бракує (0 = ні) */
flex-basis: 0; /* базовий розмір ДО розподілу вільного місця */
}
/* те саме одним рядком: */
.item { flex: 1; } /* = 1 1 0 — «ділимо вільне місце порівну» */
.item { flex: 1 1 auto; } /* базовий розмір = вміст, далі ділимо залишок */
.item { flex: 0 0 240px; }/* фіксовані 240px: не росте й не стискається */flex: 1 і flex: 1 1 auto — не одне й те саме. У першому базовий розмір
нуль, тож усі елементи отримають однакову ширину. У другому за базу береться вміст,
тож ширший елемент лишиться ширшим. Коли «колонки чомусь різні» — справа зазвичай у цьому.
А сайдбар фіксованої ширини має бути flex: 0 0 260px: без shrink: 0
він почне стискатись, щойно контенту в сусіда побільшає.
Рецепти, які покривають майже все
/* 1. Шапка: логотип ліворуч, дії праворуч */
.header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* 2. Штовхнути один елемент праворуч, решту лишити зліва */
.header .spacer { margin-left: auto; }
/* 3. Ідеальний центр */
.center { display: flex; align-items: center; justify-content: center; }
/* 4. Ряд карток, які переносяться */
.cards { display: flex; flex-wrap: wrap; gap: 16px; }
.cards > * { flex: 1 1 260px; } /* мінімум 260px, далі розтягуються */
/* 5. Сайдбар + контент */
.layout { display: flex; gap: 24px; }
.layout__aside { flex: 0 0 260px; }
.layout__main { flex: 1 1 auto; min-width: 0; } /* min-width: 0 рятує від переповнення */Flex-елемент за замовчуванням не може стати вужчим за свій вміст. Тому довгий текст або
широка таблиця всередині «розпирає» колонку й ламає розкладку. Лікується одним рядком:
min-width: 0 на елементі (або overflow: hidden).
Це та сама причина, чому <pre> з довгим рядком інколи вилазить за екран.