В данном видеокурсе мы с вами рассмотрим технология Flexbox. Flexible Box Layout Module (Flexbox) - представляет собой способ компоновки элементов, в основе лежит идея оси. Другими словами все элементы можно располагать вдоль основной и поперечной осей, или вертикально и горизонтально. Технология позволяет буквально в пару свойств создать гибкий лэйаут, или гибкие UI элементы.
- Клонируйте репозиторий:
git clone https://github.com/YauhenKavalchuk/css-flexbox.git - Перейдите в папку с проектом
cd css-flexbox - Перейдите в нужную ветку соответствующую уроку:
git checkout lesson_01git checkout lesson_02git 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)
