Изучение FLEXBOX модели вывода элементов на странице. Разбираем на чем основан Flex в CSS. Что такое основная и вспомогательная оси. Как выравнивать блоки при FLEX верстке.
#css #flex #flexbox #верстка #уроки
Язык CSS:
Часть 1: Основы CSS - • Лекция 1.4 - Web - Основы CSS. Селект...
Часть 2: Стили шрифта, текста, цвет и фон, списки - • Лекция 1.5 - Web - Стили CSS: Шрифты,...
Часть 2.1: Отступы и границы - • Лекция 1.5.1 - Web - Отступы Padding,...
Часть 3: Блочная модель в CSS. Позиционирование объектов - • Лекция 1.6 - Web - Блоки и позиционир...
Часть 4.1: Flexbox в CSS - • Лекция 1.7 - Web - Flex верстка в CSS...
Часть 4.2: Grid в CSS: • Web 1.7 - Grid контейнеры в CSS. Полн...
Часть 5: Верстка на плавающих (FLOAT) блоках - • Лекция 1.8 - Web - Верстка HTML стран...
Полный курс веб-программирование: • Обзор курса WEB-программирование
Содержание:
00:00 - Вступление
00:45 - Преимущества FLEX верстки
02:40 - Принципы FLEX модели на примере
04:30 - Основные CSS стили flex контейнера
06:55 - Стиль flex-direction (основная ось)
11:21 - Стиль flex-wrap
13:18 - Стиль flex-flow
18:48 - Стиль justify-content (выравнивание по основной оси)
23:30 - Стиль align-items (выравнивание по вспомогательной оси)
31:30 - Стиль align-content
38:50 - Стили вложенных flex элементов
41:35 - Порядок вывода блоков - Стиль order
45:20 - Стиль flex-grow
48:42 - Стиль flex-basis