Изучение FLEXBOX модели вывода элементов на странице. Разбираем на чем основан Flex в CSS. Что такое основная и вспомогательная оси. Как выравнивать блоки при FLEX верстке.
#css #flex #flexbox #верстка #уроки
Язык CSS:
Часть 1: Основы CSS - [ Ссылка ]
Часть 2: Стили шрифта, текста, цвет и фон, списки - [ Ссылка ]
Часть 2.1: Отступы и границы - [ Ссылка ]
Часть 3: Блочная модель в CSS. Позиционирование объектов - [ Ссылка ]
Часть 4.1: Flexbox в CSS - [ Ссылка ]
Часть 4.2: Grid в CSS: [ Ссылка ]
Часть 5: Верстка на плавающих (FLOAT) блоках - [ Ссылка ]
Полный курс веб-программирование: [ Ссылка ]
Содержание:
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
![](https://i.ytimg.com/vi/a6ongLiF1oI/mqdefault.jpg)