📖
Flex-елементи та flex: 1
flex-grow, flex-shrink, flex-basis і скорочення
Три властивості flex-елемента
На самих елементах (не контейнері) можна задати:
css
.item {
flex-grow: 1; /* на скільки елемент може РОСТИ (займати вільне місце) */
flex-shrink: 1; /* на скільки може СТИСКАТИСЯ якщо місця не вистачає */
flex-basis: 0; /* початковий розмір до розподілу вільного місця */
}
/* Скорочення: flex: grow shrink basis */
.item { flex: 1 1 0; }
.item { flex: 1; } /* = flex: 1 1 0 — найчастіше використовуємо */
.item { flex: none; } /* = flex: 0 0 auto — елемент не росте і не стискається */flex: 1 — найпопулярніше значення. Всі елементи з flex: 1 займають рівну частку вільного простору.
css
💬
flex: 0 0 280px — sidebar завжди 280px (не росте і не стискається). flex: 1 для content — займає все що залишилось.
Запам'ятай: flex: 1 = 'займи всю доступну частку'. Це найпотрібніша властивість для flex-елементів. Кілька flex: 1 = рівні колонки.