EasyCode365EasyCode365

Інтерактивний урок: CSS Flexbox

Цей урок зосереджений на практиці.

Ти вже вивчив базові властивості Flexbox. Тут ти змінюватимеш їх маленькими, сфокусованими кроками й бачитимеш, як рухаються flex items. Кожен playground нижче ізолює одну ідею, щоб ти міг вивчити її окремо, перш ніж поєднувати все разом.

Напрямок і перенесення

flex-direction задає main axis (ряд або колонку), а flex-wrap вирішує, чи елементи залишаються в одному рядку, чи переходять на нові рядки.

flex-direction · flex-wrap

Зміни головну вісь і ввімкни перенесення. Дивись, як елементи змінюють порядок і як змінюються переноси рядків.

1
2
3
4
.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

Вирівнювання в рядку

У рядку justify-content рухає елементи горизонтально, а align-items і align-content працюють вертикально.

justify-content · align-items · align-content

Контейнер використовує flex-direction: row. Окремо спостерігай за горизонтальним і вертикальним вирівнюванням.

1
2
3
.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}

Вирівнювання в колонці

У колонці осі змінюються: justify-content працює вертикально, а align-items і align-content працюють горизонтально.

justify-content · align-items · align-content

Контейнер використовує flex-direction: column. Дивись, як ті самі контролери тепер рухають елементи на змінених осях.

1
2
3
.flex-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}

Відступи й розмір елементів

gap додає простір між елементами, а скорочення flex керує тим, як кожен елемент росте або стискається, щоб ділити доступний простір.

gap · Flex елемента

Зміни gap і те, як кожен елемент розтягується. Дивись на відступи й на те, як елементи ділять рядок.

1
2
3
.flex-container {
  display: flex;
  gap: 12px;
}

.flex-item {
  flex: 0 0 64px;
}

Поєднай усе разом

Тепер поєднай усі властивості в одному playground і прочитай повний CSS, який він генерує.

Тренажер Flexbox

1
2
3
.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 12px;
  background-color: #f1f5f9;
}

.flex-item {
  flex: 0 0 64px;
}