Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Вирівнювання Вмісту по Горизонталі | Flexbox
course content

Зміст курсу

Основи CSS

1. Вступ до CSS

Що таке CSS?Поєднання HTML і CSSСелектори для Стилізації HTML ЕлементівЧелендж: Додайте Свої Перші СтиліЧелендж: Додайте Стилі за Допомогою Імені КласуПсевдокласи Дій КористувачаЧелендж: Псевдокласи Дій КористувачаКольори ТекстуЕфективна Робота з CSSЧелендж: Змінні в CSS

2. CSS для Тексту

Стилізація ТекстуФорматування ТекстуЧеллендж: Форматування ТекстуДодавання Користувацьких Шрифтів до Веб-сторінкиВластивості ШрифтуЧелендж: Шрифти

3. Бокс Модель та Відстань між Елементами

Бокс МодельБокс СайзінгДодавання Простору ЕлементамЧелендж: Бокс-сайзінгСтруктурні та Функціональні ПсевдокласиЧелендж: Структурні ПсевдокласиТипи ЕлементівРобота з Блочними ЕлементамиРобота з Інлайн ЕлементамиЧелендж: Спрогнозуйте Макет Сторінки

4. Флексбокс

Що таке Flexbox?Flex НапрямокВирівнювання Вмісту по ГоризонталіВирівнювання Елементів по ВертикаліВластивості Flex-ЕлементівЧелендж: FlexboxЧелендж: Робота з Flexbox

5. Декоративні Ефекти

Колір ФонуФонове ЗображенняРобота з ЗображеннямиДекоративні Псевдо-ЕлементиТініЧелендж: Декоративні ЕфектиПодальші Кроки

Основи CSS

Вирівнювання Вмісту по ГоризонталіВирівнювання Вмісту по Горизонталі

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

justify content

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

flex-start

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

html

index.html

css

index.css

js

index.js

flex-end

Всі елементи знаходяться на кінці осі.

html

index.html

css

index.css

js

index.js

center

Всі елементи знаходяться в центрі.

html

index.html

css

index.css

js

index.js

space-around

Він рівномірно розподіляє всі елементи вздовж головної осі, залишаючи трохи місця з лівого та правого країв.

html

index.html

css

index.css

js

index.js

space-between

Він дуже схожий на space-around, за винятком того, що не залишає місця на осі з лівого та правого країв.

html

index.html

css

index.css

js

index.js

Яке з наведених нижче значень властивості justify-content вирівняє flex-елементи по центру flex-контейнера?

Виберіть правильну відповідь

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

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

Зміст курсу

Основи CSS

1. Вступ до CSS

Що таке CSS?Поєднання HTML і CSSСелектори для Стилізації HTML ЕлементівЧелендж: Додайте Свої Перші СтиліЧелендж: Додайте Стилі за Допомогою Імені КласуПсевдокласи Дій КористувачаЧелендж: Псевдокласи Дій КористувачаКольори ТекстуЕфективна Робота з CSSЧелендж: Змінні в CSS

2. CSS для Тексту

Стилізація ТекстуФорматування ТекстуЧеллендж: Форматування ТекстуДодавання Користувацьких Шрифтів до Веб-сторінкиВластивості ШрифтуЧелендж: Шрифти

3. Бокс Модель та Відстань між Елементами

Бокс МодельБокс СайзінгДодавання Простору ЕлементамЧелендж: Бокс-сайзінгСтруктурні та Функціональні ПсевдокласиЧелендж: Структурні ПсевдокласиТипи ЕлементівРобота з Блочними ЕлементамиРобота з Інлайн ЕлементамиЧелендж: Спрогнозуйте Макет Сторінки

4. Флексбокс

Що таке Flexbox?Flex НапрямокВирівнювання Вмісту по ГоризонталіВирівнювання Елементів по ВертикаліВластивості Flex-ЕлементівЧелендж: FlexboxЧелендж: Робота з Flexbox

5. Декоративні Ефекти

Колір ФонуФонове ЗображенняРобота з ЗображеннямиДекоративні Псевдо-ЕлементиТініЧелендж: Декоративні ЕфектиПодальші Кроки

Основи CSS

Вирівнювання Вмісту по ГоризонталіВирівнювання Вмісту по Горизонталі

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

justify content

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

flex-start

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

html

index.html

css

index.css

js

index.js

flex-end

Всі елементи знаходяться на кінці осі.

html

index.html

css

index.css

js

index.js

center

Всі елементи знаходяться в центрі.

html

index.html

css

index.css

js

index.js

space-around

Він рівномірно розподіляє всі елементи вздовж головної осі, залишаючи трохи місця з лівого та правого країв.

html

index.html

css

index.css

js

index.js

space-between

Він дуже схожий на space-around, за винятком того, що не залишає місця на осі з лівого та правого країв.

html

index.html

css

index.css

js

index.js

Яке з наведених нижче значень властивості justify-content вирівняє flex-елементи по центру flex-контейнера?

Виберіть правильну відповідь

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

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