CSS позиціонування та Flexbox

Flexbox: сучасна розкладка

📖 Теорія

Flexbox — одновимірна система розкладки (рядок або колонка).

💡 Приклад коду

.container {
  display: flex;
  flex-direction: row;      /* row | column | row-reverse */
  justify-content: center;  /* main axis: flex-start, flex-end, center, space-between, space-around */
  align-items: center;      /* cross axis: stretch, flex-start, flex-end, center */
  flex-wrap: wrap;          /* nowrap | wrap */
  gap: 16px;                /* відступ між елементами */
}

/* Властивості flex-елементів */
.item {
  flex: 1;           /* скорочення flex-grow: 1 */
  flex: 0 0 200px;   /* grow shrink basis */
  align-self: flex-start; /* перевизначає align-items для конкретного елемента */
  order: 2;          /* змінює порядок без зміни HTML */
}

← Попередній урок Наступний урок →