Лекция 1.7 - Web - Flex верстка в CSS. Модель Flexbox на HTML страницах

Опубликовано: 28 Сентябрь 2024
на канале: IT Public 503
620
30

Изучение 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