Вивчайте Горизонтальне вирівнювання вмісту у Flexbox

Властивість justify-content відіграє ключову роль у визначенні розташування елементів flex уздовж головної осі. Її значенням за замовчуванням є flex-start.

justify-content: flex-start | flex-end | center | space-between | space-around;

Розглянемо кожен випадок на практиці. Будемо працювати зі списком карток.

flex-start

Значення за замовчуванням, яке розміщує всі елементи на початку головної осі.

index.html

index.css

flex-end

Усі елементи розташовані на кінці осі.

index.html

index.css

center

Усі елементи розташовані по центру.

index.html

index.css

space-around

Розподіляє всі елементи рівномірно вздовж головної осі з невеликим відступом з обох кінців.

index.html

index.css

space-between

Дуже схоже на space-around, але не залишає жодного простору по обидва боки осі.

index.html

index.css

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 4. Розділ 3

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Awesome!

Completion rate improved to 2.56

Свайпніть щоб показати меню

justify-content: flex-start | flex-end | center | space-between | space-around;

Розглянемо кожен випадок на практиці. Будемо працювати зі списком карток.

flex-start

Значення за замовчуванням, яке розміщує всі елементи на початку головної осі.

index.html

index.css

flex-end

Усі елементи розташовані на кінці осі.

index.html

index.css

center

Усі елементи розташовані по центру.

index.html

index.css

space-around

Розподіляє всі елементи рівномірно вздовж головної осі з невеликим відступом з обох кінців.

index.html

index.css

space-between

Дуже схоже на space-around, але не залишає жодного простору по обидва боки осі.

index.html

index.css

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 4. Розділ 3