CSS Flexbox

Описание курса:

В данном видеокурсе мы с вами рассмотрим технологию Flexbox. Flexible Box Layout Module (Flexbox) - представляет собой способ компоновки элементов, в основе лежит идея оси. Другими словами все элементы можно располагать вдоль основной и поперечной осей, или вертикально и горизонтально. Технология позволяет буквально в пару свойств создать гибкий лэйаут, или гибкие UI элементы.

Поддержать развитие канала:

---

Используемые ресурсы и инструменты:

• Visual Studio Code (редактор кода)

Полезные курсы и видео:

• CSS Grid
• CSS Inspiration

Полезные ссылки:

• A Complete Guide to Flexbox
• Flexbox Froggy (Game)

---

Быстрый старт:

• Клонируйте репозиторий: git clone https://github.com/YauhenKavalchuk/css-flexbox.git
• Перейдите в папку с проектом cd css-flexbox
• Перейдите в нужную ветку соответствующую уроку:
  • git checkout lesson_01
  • git checkout lesson_02
  • git checkout lesson_10 и т.д.

---

Список уроков:

• #0 Введение (Introduction)
• #1 Основные понятия (Base Definitions)
• #2 Направление осей (Flex-direction)
• #3 Обёртка элементов и отступы (Flex-wrap & Gap)
• #4 Выравнивание вдоль главной оси (Alignment: justify-content)
• #5 Выравнивание вдоль поперечной оси (Alignment: align-items)
• #6 Многострочное выравнивание (Alignment: align-content)
• #7 Индивидуальное выравнивание элементов (Alignment: align-self)
• #8 Размеры элементов (Flexbox Sizing)
• #9 Определение порядка элементов (Order)
• #10 Вложенность. Обёртка элементов с размерами (Nesting. Flex-basis & Flex-wrap)
• #11 Практические примеры использования Flexbox (Practical examples)

---

Связаться со мной: