Скачать "CSS Flexbox. Полный курс"

Обложка аудиозаписи

Подождите немного, мы готовим ссылки для удобного просмотра видео без рекламы и его скачивания.

Предыдущее видео: Основы SQL запросов Следующее видео: HTTP протокол в 1С для начинающих. Restful api. Postman. Fiddler. БЛОК 1

0:00

Введение

2:39

Основные понятия

8:12

Направление осей

12:36

Обёртка элементов и отступы

18:46

Выравнивание вдоль главной оси

25:07

Выравнивание вдоль поперечной оси

29:09

Многострочное выравнивание

33:06

Индивидуальное выравнивание элементов

37:36

Размеры элементов

43:06

Определение порядка элементов

48:00

Вложенность. Обёртка элементов с размерами

53:29

Практические примеры использования Flexbox

HTTP протокол в 1С для начинающих. Restful api. Postman. Fiddler. БЛОК 1

HTTP протокол в 1С для начинающих. Restful api. Postman. Fiddler. БЛОК 1

Канал: nizamov school

Основы SQL запросов

Основы SQL запросов

Канал: loftblog

Карточная игра Колодец (часть 2): победить искусственный интеллект // Уроки Scratch

Карточная игра Колодец (часть 2): победить искусственный интеллект // Уроки Scratch

Канал: Кодозавр

Уточнение времени | Татарский разговорник

Уточнение времени | Татарский разговорник

Канал: Город Казань

OST #Акыркысабак – JAISAN (Official audio)

OST #Акыркысабак – JAISAN (Official audio)

Канал: Bairak group

Как сделать окошко с информацией в РенПай? - Уроки RenPy #36 | Космо

Как сделать окошко с информацией в РенПай? - Уроки RenPy #36 | Космо

Канал: Космический Кот - RenPy

Как сделать словарь в РенПай? - Уроки RenPy #47 | Космо

Как сделать словарь в РенПай? - Уроки RenPy #47 | Космо

Канал: Космический Кот - RenPy

Основы C# - #6 - Циклы (for, foreach , do while)

Основы C# - #6 - Циклы (for, foreach , do while)

Канал: loftblog

Сепарация. Завершение терапии | Анна Волощук

Сепарация. Завершение терапии | Анна Волощук

Канал: ТЕРАПИЯ И МОРЕ | Интенсив МГИ

ТОП 12 Репозиториев для веб-разработчика

ТОП 12 Репозиториев для веб-разработчика

Канал: webDev

web

develop

front-end

frontend

веб

разработка

программирование

обучение

education

lesson

tutorial

лекция

урок

образование

flexbox

flexbox basics

flexbox css

flexbox верстка

flexbox уроки

flexbox практика

flexbox основы

flexbox grid

flexbox tutorial

flexbox адаптивная верстка

flexbox гайд

flexbox для чайников

flexbox для начинающих

flexbox курс

flexbox наглядно

css flexbox

flexbox layout

flexbox tutorial for beginners

yauhenk

webdev

css

00:00:02

я вас приветствую я евгений ковальчук вы

00:00:05

на канале web tv и добро пожаловать в

00:00:07

очередной курс который на этот раз

00:00:09

посвящен flex box если немного окунуться

00:00:12

в историю то работа над данной

00:00:14

технологии началась еще в далеком 2009

00:00:16

году в 2012 была представлена

00:00:20

заключительная версия спецификации от

00:00:23

2015 у flex бог получил довольно

00:00:25

неплохую браузерную поддержку данная

00:00:28

поддержка быстрая было обусловлено тем

00:00:31

что flexball свое время произвел

00:00:33

настоящую революцию в построении layout

00:00:36

а почему же он так стал популярен все

00:00:39

дело в том что нативные свойства

00:00:41

предоставляемое css не были

00:00:44

предназначены для данной цели то есть

00:00:47

поначалу был набор блочных и

00:00:49

срочно блочных элементов и какой-то

00:00:53

список определенных хаков которые

00:00:54

помогали

00:00:55

помощью определенных track of создать 2

00:00:59

колоночный лайалл 3 колоночный layout

00:01:01

прибить footer книзу сделать элементы

00:01:04

меню и так далее но по сути

00:01:06

использовались элементы которые

00:01:08

изначально для этого не планировались

00:01:10

свою очередь

00:01:11

flex бокс решал все описанные задачи

00:01:14

очень элегантно и минималистично

00:01:18

в основу flexmax ходят два основных

00:01:21

элемента корневой это flex контейнер и

00:01:24

все элементы внутри flex контейнера это

00:01:27

flex айтемы

00:01:29

философия flex бокс это распределение

00:01:32

элементов вдоль двух осей они называются

00:01:36

основная и поперечная таким образом все

00:01:40

что входит внутрь flex контейнера может

00:01:42

быть позиционирована друг относительно

00:01:44

друга

00:01:45

относительно самого контейнера элементы

00:01:48

могут выравниваться изменять свой

00:01:50

порядок свободное пространство может быть

00:01:52

распределена между элементами

00:01:54

либо сами элементы могут отдавать

00:01:58

какое-то пространство внутри себя и

00:02:00

именно из-за такого поведения данные

00:02:03

технологии и получила свое название лекс

00:02:05

бокс в переводе обозначает

00:02:07

гибкие блоки на данный момент у flexmax

00:02:10

прекрасная браузерная поддержка это

00:02:13

порядка 98 99 процентов плюс знание

00:02:18

flexx бокс это обязательное требование к

00:02:21

любому веб-разработчику но в данном

00:02:23

курсе мы рассмотрим все свойства flex

00:02:25

бокс и их влияние на элементы

00:02:28

а также со множеством практических

00:02:29

примеров разберем мелкие нюансы поэтому

00:02:33

обязательно подписывайтесь на канал

00:02:35

обязательно ставьте лайк и поехали и

00:02:38

добро пожаловать в первый урок

00:02:40

посвященный flexx бокс и в этом видео мы

00:02:42

с вами рассмотрим основные понятия

00:02:44

а также изучим как ведут себя обычные

00:02:47

блочные элементы при создании flex

00:02:50

контейнера однако прежде чем мы начнем пару важных

00:02:53

моментов в описании под каждым из видео

00:02:56

можно найти ссылку на репозиторий курса

00:02:58

в репозитории есть ветки каждый из

00:03:01

которых содержит код соответствующего

00:03:03

урока механизм передвижения по этим

00:03:06

меткам также есть в описании все что вам нужно

00:03:09

сделать это просто клонировать

00:03:11

репозиторий

00:03:12

прийти в папку проекта и с помощью

00:03:14

команды гель чекаут переместиться в

00:03:16

соответствующую уроку ветку

00:03:18

дополнительно в репозитории можно найти

00:03:20

ссылки на полезные ресурсы и видеокурсы

00:03:23

итак поехали для xbox эта технология для

00:03:27

создания сложных гибких макетов за счет

00:03:30

правильного размещения элементов на

00:03:32

странице она позволяет решать

00:03:35

огромный спектр задач контроль размеров

00:03:37

и порядка элементов и горизонтальное

00:03:41

и вертикальное выравнивание управление

00:03:43

пустым пространством между этими

00:03:45

элементами и их размещением друг

00:03:48

относительно друга прежде всего давайте

00:03:50

рассмотрим с вами базовые концепции и

00:03:53

основные определения которые пригодятся

00:03:55

в курсе их на самом деле не очень много

00:03:58

и запомнить их довольно просто первое

00:04:01

это flex контейнер это элемент которому

00:04:04

задано свойства дисплей со значениями

00:04:06

flex или онлайн flex это основной

00:04:09

родительский блок внутри которого

00:04:11

размещаются элементы на слайде это серый

00:04:14

блок с тёмно-серый обводкой как было

00:04:17

сказано внутреннего располагаются

00:04:18

элементы они называются flex

00:04:21

ой там или flex элемент это может быть

00:04:23

один элемент либо их может быть

00:04:26

несколько по умолчанию данный элемент и

00:04:29

располагается слева направо и сверху

00:04:31

вниз почему именно такое направление вы

00:04:34

поймете дальше ну а их размер зависит от

00:04:37

размера контента внутри еще два важных

00:04:40

понятия

00:04:41

это основная ось или главное и

00:04:44

перпендикулярная ей поперечное

00:04:46

или дополнительная основная ось по

00:04:49

умолчанию располагается горизонтально

00:04:51

именно вдоль данной оси и будут

00:04:54

располагаться элементы flex контейнера

00:04:56

дополнительная жилось служит для

00:04:59

выравнивания этих элементов друг

00:05:01

относительно друга по вертикали

00:05:03

таким образом можно сделать вывод что

00:05:06

модель flex бокс это блок элементы

00:05:09

внутри которого размещаются по вертикали

00:05:11

и горизонтали однако все-таки самое

00:05:14

важное понятие

00:05:16

это именно оси я не случайно сказал по

00:05:19

умолчанию их направлении идет слева

00:05:22

направо и сверху вниз так как во первых

00:05:24

мы можем изменять направление и сделать

00:05:27

его справа налево снизу вверх а можем

00:05:30

вообще поменять

00:05:31

оси местами таким образом чтобы основная

00:05:34

шла вертикально

00:05:36

а поперечная горизонтально для всех этих

00:05:39

манипуляций существует набор

00:05:41

определенных свойств которые мы

00:05:43

рассмотрим в данном курсе но два

00:05:46

основных блока которыми мы будем

00:05:47

манипулировать это flex контейнер и flex

00:05:50

элемент

00:05:51

и все свойства которые относятся к хлеб

00:05:54

xbox можно разделить на свойства которой

00:05:56

относится либо к одному либо к другому

00:05:59

теперь давайте рассмотрим основной код с

00:06:02

которым мы будем работать в разметке у

00:06:04

нас есть основной элемент div с классом

00:06:06

flex контейнер внутри него находятся

00:06:08

дополнительные восемь элементов с

00:06:11

классами flex idem и

00:06:13

idem 1 2 3 и так далее css-файл содержит

00:06:16

небольшую нормализацию размеров

00:06:19

элементов flex контейнер я выделил

00:06:22

обводкой в 10 пикселей

00:06:23

чтобы его размеры было проще

00:06:25

воспринимать а для каждого flex элемента

00:06:28

добавил градиент а также небольшие стиле

00:06:31

для цифр внутри результат вы можете

00:06:34

видеть на своих экранах слева по

00:06:36

умолчанию пока мы не добавили никаких

00:06:39

flex свойств на элементы play ауте они

00:06:42

располагаются согласно стандартной

00:06:43

блочной модели то есть занимает всю

00:06:46

свободную ширину страницы

00:06:48

однако если на элемент классом flex

00:06:50

контейнер мы добавим свойства дисплей

00:06:53

flex то теперь этот контейнер будет

00:06:55

занимать всю ширину страницы в то время

00:06:57

как элементы внутри него подстроиться

00:07:00

под размер контента справа даже

00:07:03

появилось свободное пространство

00:07:04

дополнительно давайте зададим высоту для

00:07:07

контейнера равную высоте

00:07:09

видимой области экрана делается это с

00:07:12

помощью свойства мин хайд со значением стол был таким

00:07:16

образом на экране вы можете видеть

00:07:18

дефолтное расположение элементов при

00:07:21

задании flex свойств другими словами

00:07:24

элементы по ширине если и мне задали

00:07:27

индивидуальные размеры подстраиваются

00:07:29

под контент а по высоте занимают всю

00:07:32

свободную высоту flex контейнера или

00:07:35

растягиваются на всю длину поперечной

00:07:38

оси для того чтобы вам проще было

00:07:40

понимать поведение я буду добавлять

00:07:43

изображения сей напоминаю что основная

00:07:45

ось эта красная стрелка поперечная эта

00:07:49

синяя и еще пару слов о корневом

00:07:51

контейнере ему мы задали свойства flex

00:07:54

то есть контейнер по сути ведет себя как

00:07:56

блочный элемент

00:07:58

занимаюсь ширину экрана однако

00:08:01

если мы зададим значение inline flex то

00:08:04

контейнер подстроиться по ширине под

00:08:07

размер контента внутри себя и по сути

00:08:09

это будет аналогом свойства

00:08:11

inline блок и в этом видео мы с вами

00:08:13

рассмотрим такую тему как задание

00:08:16

направлении элементом внутри flex

00:08:18

контейнера это именно та тема где

00:08:21

понимание того как ведут себя оси а

00:08:24

также того как располагается элементы

00:08:26

вдоль них очень важно начиная с этого

00:08:29

урока и во всех последующих

00:08:31

я буду добавлять изображение осей с

00:08:34

направлением чтобы всегда было понятно

00:08:36

где какая ось находится и вам было легче

00:08:39

ориентироваться в поведении flex

00:08:41

элементов из прошлого урока вы помните

00:08:44

что основная ось располагается

00:08:46

горизонтально а поперечное вертикально

00:08:48

flex элементы идут вдоль них слева

00:08:51

направо и сверху вниз за то как будет

00:08:55

располагаться основная ось отвечают

00:08:57

свойство

00:08:58

flex direction определяется данное

00:09:00

свойство для flex контейнера по

00:09:03

умолчанию она имеет значение роу

00:09:05

той строка при его добавлении никаких

00:09:08

изменений соответственно не происходит

00:09:11

следующее значение это

00:09:13

роу реверс в данном случае основная ось

00:09:17

будет идти не слева направо и справа

00:09:19

налево именно поэтому порядок

00:09:22

отображения элементов

00:09:23

изменился на противоположной а также они

00:09:27

перенеслись в правую часть экрана здесь

00:09:29

важно понимать что мы изменили непорядок

00:09:33

самих элементов

00:09:34

так как в аффлек xbox за это отвечает

00:09:36

отдельное свойство которое называется

00:09:38

ордер а изменили

00:09:40

именно направление главной оси поэтому

00:09:43

элементы идущие вдоль неё

00:09:45

перераспределились следующее значение

00:09:47

это коллом или колонка и как вы видите

00:09:51

теперь основная ось располагается

00:09:53

вертикально и и направлении сверху вниз

00:09:56

поэтому все элементы идущие вдоль неё

00:09:59

распределяется точно таким же образом

00:10:02

верху 1 внизу 8 и по аналогии срок

00:10:06

реверс существует значение калом реверс

00:10:09

она разворачивает основную ось

00:10:12

на 180 градусов в результате чего ее

00:10:16

направлении идет вверх и в этом случае

00:10:19

порядок элементов будет не сверху вниз и

00:10:21

снизу вверх в целом это все что касается

00:10:24

направление осей давайте для закрепления

00:10:27

рассмотрим пару практических примеров

00:10:29

для этого в разметке я оставлю только

00:10:32

три первых flex элемента изменим их

00:10:35

значения с цифр на home пост и about as

00:10:38

несмотря на то что мы используем просто

00:10:41

div элемент давайте представим что это

00:10:44

все-таки навигация установим

00:10:46

горизонтальное расположение элементов

00:10:47

для свойства flex direction определим

00:10:51

значение роу его можно и не записывать

00:10:54

так как это значение по умолчанию пока

00:10:56

не обращайте внимание на пустое

00:10:58

пространство справа на которое не

00:11:00

растянулись

00:11:01

элементы в будущих уроках мы научимся

00:11:04

его убирать как результат на экране вы

00:11:07

можете видеть горизонтальную навигацию а теперь

00:11:10

представим что для мобильных устройств

00:11:12

навигацию нужно сделать вертикально для

00:11:15

решения я воспользуюсь

00:11:16

медиа запросам в котором установлю

00:11:19

максимальную ширину например в 650

00:11:22

пикселей а внутри него для нашего flex

00:11:25

контейнера мы переопределим значение

00:11:27

flex direction на ко лан в результате

00:11:30

при изменении размеров экрана мы получим

00:11:34

отзывчивой навигацию если немного

00:11:37

абстрагироваться и представить что у нас

00:11:39

стоит задача создания глобального

00:11:41

лейаута страницы для этого в разметке мы

00:11:44

распределим зоны например пусть по бокам

00:11:47

будут идти два а сайт элемента

00:11:49

а в центре основной контент уже сейчас

00:11:53

мы по сути получим 1 колоночный layout

00:11:56

для мобильных устройств а при увеличении

00:11:59

размеров экрана получим 3 колоночный

00:12:01

макет

00:12:03

еще лучше он будет выглядеть если

00:12:05

сделать его на всю высоту экрана для

00:12:08

этого достаточно определить свойства мин

00:12:10

хайд со значением стоге

00:12:12

эйч и все-таки чтобы пустое пространство

00:12:15

нас не бесило я добавлю одно свойство

00:12:18

для flex элементов однако расскажу о нем

00:12:21

уже следующих уроках таким образом зная

00:12:25

всего лишь о flexter экшн и о том как

00:12:28

управлять направлением основной оси

00:12:30

можно сделать отзывчивые элемент

00:12:33

страницы либо глобальную структуру

00:12:35

лейаута и в данном видео мы рассмотрим

00:12:37

такое понятие как перенос flex элементов

00:12:40

а также разберем способы задания

00:12:43

отступов между элементами

00:12:45

на экране вы можете видеть flex

00:12:47

контейнер внутри которого есть восемь

00:12:49

элементов

00:12:50

ширина каждого подстраивается под

00:12:53

контент внутри теперь давайте добавим

00:12:55

свойства улиц в 200 пикселей для всех

00:12:58

айтемов вы можете видеть что элементы

00:13:01

растянулись

00:13:02

однако их ширина явно не равняется 200

00:13:05

пикселей

00:13:06

все дело в том что по умолчанию элементы

00:13:09

внутри flex контейнера не переносится на

00:13:12

новый ряд

00:13:13

они занимают всю доступную ширину только

00:13:16

одной строки об этой особенности очень

00:13:19

важно помнить при изучении flexx бокс

00:13:21

для того чтобы разрешить перенос

00:13:23

элементов на новый ряд если в текущем

00:13:25

им недостаточно места существует

00:13:28

свойства flex wrap она применяется

00:13:30

именно для flex контейнера по умолчанию

00:13:33

его значение

00:13:34

но у раб и как было сказано она не

00:13:37

разрешает перенос но если

00:13:40

но wrap мы изменим на у раб во-первых

00:13:43

теперь наши элементы по ширине будут

00:13:46

занимать действительно 200 пикселей а во

00:13:48

вторых все не помещающиеся айтемы

00:13:51

перенесутся на новые ряды есть еще одно

00:13:54

значение это wrap реверс

00:13:57

но как не трудно догадаться она просто

00:13:59

изменяет порядок

00:14:00

переносимых элементов и теперь они

00:14:03

отображается слева направо но уже снизу

00:14:06

вверх это произошло потому что как вы

00:14:08

помните у нас есть две оси

00:14:10

основная и поперечная так вот свойство

00:14:14

wrap реверс

00:14:15

пора чивает поперечную ось на 90

00:14:18

градусов по сути это и есть весь

00:14:20

механизм переноса элементов смотрите еще

00:14:23

один интересный нюанс для элементов

00:14:25

ширину мы определили как 200 пикселей в

00:14:28

высоту не задавали однако если на flex

00:14:31

контейнер мы добавим свойства мин хайд

00:14:34

со значением store

00:14:35

речь то есть растянем контейнер на всю

00:14:38

высоту экрана

00:14:39

то элементы внутреннего несмотря на то

00:14:42

что отображаются в нескольких рядах

00:14:44

займут всю доступную высоту

00:14:46

как вы помните это дефолтное поведение

00:14:49

распространение элементов по поперечной

00:14:52

оси да у нас есть еще проблема с пустым

00:14:55

пространством в правой части внутри

00:14:57

нашего контейнера решается это очень

00:15:00

просто для этого достаточно указать

00:15:02

ширину не в жестких величинах я имею

00:15:05

ввиду в пикселях

00:15:06

а например в процентах если мы определим

00:15:10

ширину в 50 процентов то получим две

00:15:12

колонки и layout элементы внутри

00:15:15

которого

00:15:16

равномерно распределены по высоте а

00:15:18

можем указать

00:15:19

тридцать три целых и тридцать три сотых

00:15:22

процента и получим три колонки с тем же

00:15:25

эффектом то есть опять же определив

00:15:27

буквально два свойства

00:15:29

то получаете гибки layout со

00:15:31

своеобразными карточками

00:15:32

аналогичное поведение также будет если

00:15:35

основную ось мы развернем для начала мин

00:15:38

хайд изменим на хайд то есть высоту

00:15:41

контейнера зададим строго равной высоте

00:15:43

экрана и с помощью flex direction со

00:15:46

значением калом определим основную ось

00:15:49

вертикально элементы

00:15:51

распространяются вдоль основной оси это

00:15:54

элементы с 1 по 7 8

00:15:57

не помещается и соответственно

00:15:59

переносится на новый ряд

00:16:01

однако если мы закомментируем свойства

00:16:04

flex wrap тем самым запретим перенос

00:16:06

айтемы отобразятся в одну линию и

00:16:09

вылезут за пределы контейнера но если мы

00:16:12

закомментируем жесткое задание высоты то

00:16:15

эти же элементы просто растянут

00:16:17

контейнер в результате чего у нас

00:16:20

появится полоса прокрутки то есть по

00:16:22

высоте контейнер подстроится под

00:16:24

содержимое внутри него

00:16:26

давайте снова вернемся штрих колоночный

00:16:28

дед следующая тема это задание отступов

00:16:32

для элементов и flex контейнер и flex

00:16:35

элементы

00:16:36

воспринимают свойства margin и padding

00:16:38

для примера для всех элементов давайте

00:16:41

зададим марджан в 5 пикселей смотрите

00:16:44

третья колонка у нас исчезла это не баг

00:16:47

а верное поведение произошло это потому

00:16:50

что ширину для каждого элемента мы

00:16:52

задали в 33 процента то есть каждый

00:16:54

элемент занимает треть ширины экрана а

00:16:57

добавленные 5 пикселей дополнительно

00:17:00

увеличивают размер элемента это так

00:17:03

называемая блочная модель которую мы

00:17:05

рассматривали в курсе пасе с.с. итоговая

00:17:08

ширина элемента получается 33 процента

00:17:11

плюс 5 пикселей слева и справа поэтому

00:17:15

для расчета ширины

00:17:16

мы можем воспользоваться коук и отнять

00:17:19

от общей ширины

00:17:21

10 пикселей таким образом мы снова

00:17:24

вернули третий ряд

00:17:25

но если присмотреться к макету то можно

00:17:28

заметить нюанс отступ от контейнера до

00:17:31

элемента

00:17:32

равняется заданным 5 пикселем в то время

00:17:35

как отступ между элементами

00:17:37

равен 10 то есть учитывается марджан

00:17:40

каждого это еще одна особенность flex

00:17:43

модели

00:17:44

а именно установленная марк-хен не

00:17:46

схлопываются как на обычных блочных

00:17:49

элементах а суммируется

00:17:51

ну и в заключении если мы хотим

00:17:53

выровнять наш layout to на контейнер

00:17:55

можно определить по 1 кв 5 пикселей

00:17:58

теперь все выглядит ровно однако в 2020

00:18:02

году в официальную документацию было

00:18:04

добавлено новое свойство которое

00:18:06

называется гэп она определяет расстояние

00:18:09

именно между элементами внутри flex

00:18:13

контейнера поддержка его пока что

00:18:15

оставляет желать лучшего но и все-таки

00:18:17

постепенно она улучшается закомментируем

00:18:20

padding у контейнера и марджан у

00:18:23

элемента после чего контейнеру добавим

00:18:26

свойства гэп со значением 15 пикселей и

00:18:29

таким образом расстояние между

00:18:32

элементами получается 15 пикселей мы

00:18:35

можем уменьшить его до 10 или 5 а можем

00:18:38

увеличить главное

00:18:40

не забывайте пересчитывать ширину

00:18:42

элементов чтобы они правильно

00:18:44

отображались внутри контейнера и в этом

00:18:47

видео мы с вами поговорим о том каким

00:18:49

образом можно выравнивать элементы

00:18:51

внутри flex контейнера вдоль главной оси

00:18:54

однако прежде я бы хотел рассказать вам

00:18:56

о flex flow в двух предыдущих видео мы

00:18:59

разобрали такие свойства как flex

00:19:01

direction которая отвечает за то как

00:19:04

будет располагаться главная ось

00:19:06

горизонтально или вертикально и flex

00:19:09

frap она отвечает за то будут ли flexx

00:19:12

элементы

00:19:13

переноситься на новый ряд если в текущем

00:19:15

для них не будет хватать места так вот

00:19:18

flex flow это комбинация двух описанных

00:19:21

свойств причем именно в том порядке как

00:19:23

я их назвал применяется она

00:19:25

для flex контейнера например элементы мы

00:19:29

можем разместить вертикально и разрешить

00:19:31

их перенос для этого мы указываем flex

00:19:34

flow со значениями каллум и

00:19:37

wrap отлично двигаемся дальше и теперь

00:19:40

поговорим о выравнивание элементов для

00:19:43

данной цели используются целых три

00:19:46

свойства которые применяются для flex

00:19:48

контейнера и еще одно дополнительное

00:19:51

которое применяется непосредственно на

00:19:53

flex элемент применение того или иного

00:19:56

свойства

00:19:57

зависит от контекста выравнивания

00:19:59

элементы можно выровнять

00:20:01

вдоль основной оси для данной цели

00:20:04

используют свойство джесси free content

00:20:06

аналогично выравнивание можно

00:20:08

осуществить и вдоль поперечной оси для

00:20:11

этого можно воспользоваться свойством

00:20:13

line ой dance line контент предназначена для

00:20:17

выравнивания flex элементов которая

00:20:20

располагается в несколько строк и

00:20:22

последнее свойство и the lines of

00:20:25

которая служит для индивидуального

00:20:27

выравнивания элемента внутри контейнера

00:20:30

итак поехали по порядку свойства just

00:20:33

free content

00:20:34

чтобы показать выравнивание вдоль

00:20:36

основной оси я оставлю только 4 элемента

00:20:39

остальные пока закомментирую также

00:20:41

уменьшенных ширину до 100 пикселей и

00:20:44

уберу высоту историей чтобы она нам не

00:20:47

мешала отлично как вы можете видеть все

00:20:50

элементы сгруппированы слева внутри flex

00:20:53

контейнера теперь используем свойство

00:20:55

джозефа и контент по умолчанию его

00:20:58

значения flex старт то есть элементы

00:21:01

выравниваются от начала основной оси

00:21:03

которая сейчас расположена горизонтально

00:21:06

если мы укажем значение flex and the как

00:21:09

логично предположить они перенесутся в

00:21:12

конец оси ну или как в нашем случае вправо

00:21:15

следующее значение это singers в этом

00:21:18

случае все flex айтемы будут расположены

00:21:21

в центре основной оси

00:21:23

space between равномерно распределяет

00:21:26

элементы на оси

00:21:27

стой особенностью что первый будет

00:21:30

прилегать к началу осень а последний к

00:21:32

ее концу и расстояние между всеми

00:21:35

внутренними элементами будет одинаковым

00:21:38

другими словами если у нас есть только 2

00:21:41

айтема то они будут располагаться строго

00:21:44

по краям само значение фактически так и

00:21:47

переводится пространство между кстати

00:21:50

запоминайте

00:21:51

этот кейс так как именно он чаще всего

00:21:54

применяется для распределения элементов

00:21:56

по основной оси с этим разобрались

00:21:59

двигаемся дальше следующее значение

00:22:01

space раунд переводится как пространство

00:22:04

вокруг

00:22:05

а соответственно вокруг всех элементов

00:22:08

свободное пространство распределяется

00:22:09

равномерно с краев

00:22:11

ост у получился чуть меньше так как

00:22:14

между элементами

00:22:15

эти отступы не схлопываются а

00:22:17

суммируются ну а если нам нужно

00:22:20

полностью равномерное расстояние между

00:22:23

элементами и между контейнером и

00:22:25

элементом то можно воспользоваться

00:22:27

значением space evenly

00:22:30

и все свободное пространство

00:22:31

распределиться одинаково давайте

00:22:33

развернем нашу основную ось чтобы

00:22:36

посмотреть как данное свойство будет

00:22:38

работать вертикально для этого добавляем

00:22:40

flex direction со значением каллум для

00:22:43

контейнера теперь основная ось идет

00:22:46

вертикально по направлен

00:22:47

у нее сверху вниз как можно видеть

00:22:50

несмотря на то что для распределения

00:22:52

элементов у нас указано значение space

00:22:54

evenly

00:22:55

они находятся плотно друг другу и какое

00:22:58

бы значение мы не указали

00:23:00

центр или fleck старт визуально ничего

00:23:03

не изменится это происходит потому что

00:23:06

высота для контейнера у нас не задано

00:23:08

а следовательно она будет подстраиваться

00:23:11

под контент внутри

00:23:13

фиолетовая обводка это очень наглядно

00:23:16

иллюстрирует поэтому давайте для начала

00:23:18

зададим высоту контейнера равную высоте

00:23:21

экрана отлично теперь мы можем

00:23:24

посмотреть на выравнивание flex старт

00:23:27

поместит все элементы сверху flex and

00:23:30

перенесет их вниз

00:23:32

a sentir разместит их середине основной

00:23:35

оси и они будут центрированы

00:23:37

по вертикали прежде чем посмотреть как

00:23:40

работают остальные значения покажу один

00:23:42

момент сейчас на экране вы фактически

00:23:45

видим квадраты с цифрами так как по

00:23:47

высоте наш блог подстраивается под

00:23:49

контент в то время как для ширины мы

00:23:52

задали значение 100 пикселей и если его

00:23:55

закомментировать то блоки растянуться по

00:23:58

всей ширине экрана я надеюсь вы помните

00:24:00

почему это произошло

00:24:02

перпендикулярно основной оси идет

00:24:04

поперечное которое сейчас располагается

00:24:07

горизонтально адекватное поведение

00:24:09

элементов по этой дополнительной оси это

00:24:12

растягивание именно поэтому у нас занята

00:24:15

вся ширина и разберем поведения

00:24:17

элементов при задании трех последних

00:24:19

значений и the space between 1

00:24:23

располагается самом верху последний в

00:24:25

самом внизу

00:24:26

свободное пространство распределена

00:24:28

равномерно внутри

00:24:30

space раунд все свободное пространство

00:24:33

распределяется равномерно вокруг

00:24:35

элементов на стыке двух элементов она

00:24:38

удваивается и в заключении space evenly

00:24:41

которая распределить свободное место

00:24:44

между элементами и контейнером

00:24:47

равномерно также не забываем что

00:24:49

основную ось мы можем сделать не только

00:24:51

вертикальный но и изменить ее

00:24:53

направление задав значение калом реверс

00:24:56

и в этом случае она будет идти снизу

00:24:59

вверх и поэтому порядок элементов

00:25:01

изменится на противоположный в то время

00:25:04

как поведение выравнивания останется

00:25:06

прежним и в данном видео мы с вами

00:25:08

рассмотрим механизм выравнивание

00:25:10

элементов вдоль поперечной оси на экране

00:25:13

вы можете видеть знакомый вам layout

00:25:16

flex контейнер четырьмя элементами

00:25:18

внутри

00:25:19

поскольку никаких дополнительных свойств

00:25:21

не задано

00:25:22

основная ось идет горизонтально а

00:25:25

поперечное вертикально для того чтобы

00:25:28

задавать выравнивание элементов вдоль

00:25:30

дополнительный оси

00:25:31

существует свойство line at emc у

00:25:34

которого набор значений практически

00:25:36

такой же как и у g степой контент однако

00:25:40

при текущем наборе стилей задавать

00:25:43

данное свойство бесполезно все дело в

00:25:45

том что контейнеру не определено высота

00:25:48

а следовательно он подстраивается под

00:25:51

внутренний контент и так как все

00:25:54

элементы у нас одинаковы то визуально

00:25:56

никаких изменений не происходит поэтому

00:25:59

для начала давайте зададим высоту

00:26:01

контейнера равную высоте экрана теперь

00:26:04

как вы можете видеть все элементы

00:26:06

растянулись

00:26:07

это дефолтное поведение которое вы уже

00:26:10

видели в предыдущих уроках по умолчанию

00:26:13

свойства и line anthems

00:26:15

принимает значение строишь которая и

00:26:18

растягивает элементы вдоль поперечной

00:26:20

оси

00:26:21

если мы укажем значение flex старт то

00:26:24

элементы у нас переместятся вверх так

00:26:27

как там находится начало поперечной оси

00:26:29

flex and принесет их вниз или в конец

00:26:33

поперечной оси которая направлена сверху

00:26:36

вниз ну и значение center разместит

00:26:39

элемент в середине по вертикали

00:26:42

заключительное значение это

00:26:44

bass line или базовая линия если его

00:26:47

добавить сейчас то поведение будет

00:26:50

похоже на fleek старт это происходит

00:26:52

потому что все элементы имеют одинаковую

00:26:55

высоту

00:26:56

но давайте для второго и четвертого

00:26:59

зададим свои размеры шрифтов

00:27:01

мы должны изменять именно шрифт для того

00:27:04

чтобы базовая линия flex элемента

00:27:06

сместилась в нашем случае для второго мы

00:27:09

определим значение в 150 а для 4 в 100

00:27:12

пикселей результатом будет выравнивание

00:27:15

блоков именно по базовой линии которая

00:27:18

будет проходить где-то посередине ну и

00:27:21

для сравнения мы можем изменить значение

00:27:24

и line at emc на flex старт и здесь уже

00:27:27

элементы выравниваются просто от начала

00:27:30

оси как и в предыдущем видео давайте

00:27:32

поменяем оси местами и посмотрим на

00:27:35

поведение элементов для этого используем

00:27:38

уже знакомое вам свойства flex direction

00:27:41

со значением калом и теперь поперечная

00:27:44

ось идет горизонтально слева направо flex

00:27:48

старт который сейчас применен прибивает

00:27:51

элементы к началу оси опять же обратите

00:27:53

внимание что они все одинаковой ширины

00:27:56

чего быть не должно так как шрифт

00:27:59

отличается как и прошлый раз это

00:28:01

произошло из-за указания у its поэтому

00:28:04

давайте его закомментируем отлично

00:28:07

теперь это похоже на правду

00:28:09

следующее значение flex and поместит

00:28:12

элементы на правой стороне экрана центр

00:28:15

разместит их строго по центру поперечной

00:28:18

оси stretch расти netflix элементы вдоль

00:28:22

оси или по ширине экрана а вот борис

00:28:26

line at работает как flex старт все дело

00:28:29

в том что базовая линия элемента идет

00:28:32

горизонтально и не зависит от направлю

00:28:35

неа сейфов лекс бокс в нашем же случае

00:28:37

мы получили ситуацию когда каждый

00:28:40

элемент занимают свой ряд

00:28:41

им просто нет относительно чего

00:28:44

выравниваться теперь зная всего лишь два

00:28:46

свойства грести фай контент и и line and

00:28:50

ems то есть выравнивание элементов по

00:28:52

главной и поперечной осям можно без

00:28:56

проблем выровнять элемент по центру

00:28:58

экрана причем не важно 1 это элемент или их

00:29:01

несколько одинаковые у них размеры или

00:29:04

же как в примере разные

00:29:05

все будут размещены строго по центру

00:29:08

flex контейнера и в этом видео мы

00:29:10

продолжим рассматривать с вами

00:29:12

выравнивание элементов внутри контейнера

00:29:14

и сегодняшние свойства это

00:29:17

line контент как и два предыдущих

00:29:19

применяется она flex контейнеру и

00:29:22

предназначена для выравнивания

00:29:24

многострочного контента

00:29:26

его особенность в том что оно

00:29:28

срабатывает только если на контейнере

00:29:31

установлено дополнительное свойство flex

00:29:33

wrap со значением wrap

00:29:35

в этом легко убедиться давайте при

00:29:38

текущих стилях определим и line контент

00:29:41

со значением строить как вы видите

00:29:43

ничего не изменилось однако если теперь

00:29:46

мы разрешим перенос то картина уже

00:29:48

поменяется а в частности у нас появится

00:29:51

многострочный контент растянуты вдоль

00:29:54

поперечной оси

00:29:55

стричь это значение по умолчанию

00:29:59

которая и отвечает за растягивание если

00:30:02

мы укажем flex старт она осуществит

00:30:05

выравнивание элементов от начала

00:30:07

поперечной оси дополнительный стиле не

00:30:10

указана значит ось направлена сверху вниз именно

00:30:14

поэтому все flexx элементы мы видим

00:30:16

сверху по аналогии flex and перенесет их

00:30:19

вниз или выровняет в конце поперечной

00:30:22

оси

00:30:23

следующее значение это центр как

00:30:26

нетрудно догадаться все flex элементы

00:30:28

теперь будут находиться в центре по

00:30:30

вертикали так как дополнительная ось у

00:30:33

нас идет именно вертикально space

00:30:35

between добавит одинаковое расстояние

00:30:38

между элементами

00:30:39

причем первые элементы прибивается к

00:30:42

началу дополнительной оси а последние к

00:30:45

ее окончанию и заключительное значение

00:30:48

это space раунд свободное пространство

00:30:51

распределится равномерно и между

00:30:53

элементами и между элементом и flexx

00:30:56

контейнером как вы видите за исключением

00:30:59

значения space evenly

00:31:01

свойства онлайн-контент распределяет

00:31:04

элементы аналогично justify контент

00:31:06

только данное распределение идет именно

00:31:09

вдоль поперечной оси настолько наглядно

00:31:12

и расположение элементов доступна

00:31:15

благодаря растягиванию контейнера по

00:31:17

высоте так как если это значение мы

00:31:20

закомментируем то контейнер подстроится

00:31:23

под контент и элементы по вертикали

00:31:26

будут идти плотно друг другу а теперь

00:31:28

давайте как обычно поменяем оси местами

00:31:31

и посмотрим на поведение элементов в

00:31:34

данном случае добавляем на контейнер

00:31:36

свойства flex direction со значением

00:31:38

калом раскомментируем высоту чтобы

00:31:41

получился многострочный контент теперь

00:31:44

поперечная ось находится горизонтально

00:31:46

если мы начнем ужимать окно по высоте то

00:31:50

не помещающиеся элементы будут

00:31:53

перепрыгивать во вторую колонку сейчас и

00:31:56

line контент определено со свойством

00:31:58

space раунд и поэтому свободное

00:32:00

пространство распределена равномерно

00:32:02

между двумя колонками если мы укажем

00:32:06

значение флик старт то элементы

00:32:09

переместятся влево в начало поперечной

00:32:11

оси

00:32:12

flex and перенесет и вправо или в конец

00:32:16

оси ну а центр просто от центрирует их по

00:32:20

горизонтали указав значение по умолчанию

00:32:22

то есть стричь мы получим немного не то

00:32:26

что ожидали ведь по сути элементы должны

00:32:29

быть растянуты по ширине а у нас они

00:32:32

занимают определённый размер и между

00:32:34

ними есть свободная просто

00:32:36

ства но это все из за того что их ширина

00:32:38

задано жестко в 200 пикселей

00:32:41

закомментировал это значение мы получим

00:32:44

вполне ожидаемый результат то есть

00:32:46

растянутая блоки

00:32:48

ну и заключительный кейс и the column

00:32:50

реверс или разворот поперечной оси на

00:32:53

180 градусов в результате которого

00:32:56

направления идет снизу вверх

00:32:58

основное поведение такой же как и в

00:33:01

предыдущем случае просто теперь порядок

00:33:03

элементов изменен на противоположный и в

00:33:06

этом видео мы разберем каким образом

00:33:08

можно осуществлять

00:33:10

индивидуальное выравнивание каждого

00:33:12

flexo элемента дело в том что разобрав

00:33:15

свойства онлайн-контент мы рассмотрели

00:33:18

все свойства относящиеся к flex

00:33:20

контейнеру и начиная с этого урока мы

00:33:23

начнем изучение свойств

00:33:24

относящихся к элементам и первое это и

00:33:27

line сел

00:33:28

она предназначена для задания

00:33:30

выравнивания определенному элементу

00:33:33

данное выравнивание будет происходить

00:33:35

вдоль поперечной оси установим первому

00:33:38

элементу свойства и line сел со

00:33:41

значением stretch это значение по

00:33:43

умолчанию в результате видимых изменений

00:33:46

нет но как и в случае со line idols

00:33:49

стрейч растягивает элемент по всей

00:33:51

высоте контейнера для второго элемента

00:33:54

значение для lines of давайте определим

00:33:57

как flex старт и как нетрудно догадаться

00:33:59

теперь элемент перенесется вверх

00:34:02

контейнера то есть начало оси и по

00:34:05

высоте он подстроиться под размер

00:34:07

контента определив значение центр для

00:34:10

третьего элемента мы вертикально

00:34:12

центрируем его внутри контейнера или

00:34:15

перенесем середину поперечной оси но

00:34:18

значение flex and отправит flex элемент

00:34:21

самый низ или в конец оси заключительное

00:34:24

значение это

00:34:26

bass line которая в данном случае

00:34:28

покажет аналогичное поведение с flex

00:34:30

старт так как опять же данное

00:34:32

выравнивание происходит по базовой линии

00:34:35

а элемента с которым бы данная базовая

00:34:38

линия была определена

00:34:39

нас нет чтобы увидеть эффект давайте

00:34:43

шестому flex элементу зададим тоже

00:34:46

выравнивание

00:34:47

однако увеличим его шрифт чтобы сместить

00:34:50

базовую линию и теперь вы можете видеть

00:34:53

что пятый элемент

00:34:54

отступил от края и выравнялся шестым

00:34:57

напоминаю что все выравнивания

00:35:00

относительно поперечной оси мы можем

00:35:02

видеть только благодаря растягиванию

00:35:05

контейнера на всю высоту экрана

00:35:07

если мы закомментируем это значение а

00:35:10

также закомментируем размер шрифта для 6

00:35:13

элемента

00:35:14

то получим плотно прилегающие друг другу

00:35:17

flex элементы

00:35:18

а теперь как обычно давайте поменяем

00:35:20

местами наши оси

00:35:22

то есть расположен поперечную

00:35:23

горизонтально указываем flex direction

00:35:26

со значением каллум и что мы видим

00:35:29

первый элемент со значением стрейч

00:35:32

растягивается на всю ширину экрана

00:35:34

второй третий и четвертый элементы со

00:35:37

значениями flex старт центр flex and

00:35:40

соответственно

00:35:41

располагается вдоль поперечной оси в

00:35:44

начале середине и конце

00:35:46

но выровненные по базовой линии 5 и 6

00:35:49

элементы располагается слева в начале

00:35:52

оси так как в каждой строке находится

00:35:55

только по одному элементу

00:35:56

им нищим выравниваться еще один

00:35:59

интересный момент это взаимодействие

00:36:02

свойства и line стелс многострочный

00:36:04

контентом давайте для контейнера

00:36:06

разрешим перенос элементов на новый ряд

00:36:09

делаем это с помощью свойства flex wrap

00:36:12

со значением wrap разворот оси пока

00:36:15

закомментируем а ширину каждого элемента

00:36:17

сделаем по 300 пикселей

00:36:20

мы получили многострочный контент как

00:36:23

может показаться вначале хаотично

00:36:25

расположенные но это не так во первых в

00:36:28

данный момент мы можем наблюдать три

00:36:30

одинаковых по высоте строки

00:36:32

каждая из которых содержит по два

00:36:35

элемента 1 ой там поскольку растянут с

00:36:38

помощью строить и показывает

00:36:40

приблизительную высоту строки

00:36:42

второй элемент и значением flex старт

00:36:44

располагается в начале поперечной оси

00:36:47

поэтому он находится сверху 3 и 4 это

00:36:51

выравнивание по центру и по flex and то

00:36:54

есть по концу асей это также мы можем

00:36:57

наблюдать

00:36:58

ну а два последних элемента

00:37:00

выровнены просто по базовой линии до на

00:37:03

индивидуальное выравнивание будет

00:37:05

сохраняться даже если мы начнем изменять

00:37:07

размер окна при достаточно широком

00:37:09

размере можно видеть как четвертый

00:37:13

элемент перепрыгивает вниз но опять же

00:37:15

здесь ничего не нарушается так как

00:37:18

элементы из трех строк теперь

00:37:20

располагается в 2 и 4 выровнен по flex

00:37:24

and поэтому он находится в самом низу и

00:37:26

если потянуть дальше то можно увидеть

00:37:29

его перепрыгивание в первый ряд где с

00:37:32

остальными элементами

00:37:33

можно легко определить его

00:37:35

индивидуальное выравнивание и в данном

00:37:37

видео мы рассмотрим задание размеров

00:37:39

flex элементом в предыдущих уроках мы

00:37:42

использовали пиксели или проценты то

00:37:45

есть величины предоставляемые

00:37:47

непосредственно css например можно взять

00:37:50

flex ой там и задать ему размер в 200

00:37:53

пикселей в этом случае величина будет

00:37:55

задано фиксирована больше она не станет

00:37:58

но при уменьшении размеров экрана может

00:38:01

стать меньше недостаток появление

00:38:04

свободной области справа второй вариант

00:38:06

можно задать ширину через проценты в

00:38:10

этом случае определить значение как

00:38:12

тридцать три целых и тридцать три сотых

00:38:14

процента мы получим три равных элемента

00:38:17

растянутых на всю ширину контейнера

00:38:20

аналогично для задания размеров можно

00:38:22

использовать и

00:38:23

мрм и так далее недостаток такого

00:38:26

подхода определение размера элемента

00:38:29

только по горизонтали или вертикали то

00:38:32

есть задание либо ширины

00:38:34

либо высоты однако sunflex бокс

00:38:37

предоставляет довольно гибкий и

00:38:39

универсальный механизм управления

00:38:41

размерами и пространствами

00:38:44

которые элементы могут забирать или

00:38:46

отдавать это не просто размерности

00:38:48

а пропорций которые применяют тот или

00:38:51

иной механизм распределения размера все

00:38:54

свойства которые мы рассмотрим

00:38:55

применяются

00:38:56

именно k-flex элементом и первое это

00:38:59

flex grow она определяет возможность

00:39:02

увеличения элемента случае необходимости

00:39:05

закомментируем ширину в 33 процента как

00:39:09

вы помните по умолчанию размер ячеек

00:39:11

подстраивается под can

00:39:13

and то есть если я добавлю

00:39:15

дополнительные символы элемент станет

00:39:17

больше

00:39:18

теперь давайте добавим свойства flex

00:39:20

гром со значением 1 на все айтемы как вы

00:39:24

видите в этом случае мы получили

00:39:27

равномерное увеличение каждого из

00:39:30

элементов свободного пространства не осталось так

00:39:33

как они заняли всю доступную ширину

00:39:35

контейнера в данный момент мы определили

00:39:38

пропорцию по которой элементы будут

00:39:41

занимать свободный объем если для всех

00:39:43

элементов установлено значение 1 то

00:39:46

оставшееся пространство в контейнере

00:39:48

будет равномерно распределено между

00:39:51

всеми дочерними элементами если один из

00:39:55

дочерних элементов имеет значение 2 то

00:39:57

оставшегося свободного пространства ему

00:40:00

уйдет в два раза больше чем другим

00:40:02

например мы берем второй элемент

00:40:05

определяем его значение как 2 в

00:40:07

результате доступное свободное

00:40:10

пространство

00:40:11

распределяется по единице между первым и

00:40:14

третьим элементами и по двойке

00:40:16

для второго в результате чего его размер

00:40:19

становится больше если для третьего мы

00:40:21

определим flex grow как три

00:40:23

то теперь третий элемент станет самым

00:40:26

большим а самый маленький 1 с единицей

00:40:29

самое главное запомните мы определяем не

00:40:33

внутренний размер элемента а пропорцию

00:40:36

распределение свободного пространства

00:40:38

поэтому определив flex growth 3 мы не

00:40:41

говорим что элемент должен стать в 3

00:40:44

раза больше самого маленького он лишь

00:40:46

забирает в 3 раза больше

00:40:48

именно свободного места надеюсь принцип

00:40:52

понятен следующее свойство это flex

00:40:55

schwing определяет сколько свободного

00:40:57

пространства может отдать элемент в

00:41:00

случае необходимости другими словами

00:41:02

готов ли он поделиться размером если

00:41:05

соседнем элементом не будет хватать

00:41:07

места по дефолту значение равно единице

00:41:10

установим базовую ширину для всех

00:41:12

элементов в 300 пикселей а теперь для

00:41:16

второго и третьего

00:41:17

изменим значение s flex гром на flex шу

00:41:20

young

00:41:21

если мы растянем окно браузера то

00:41:23

визуально все элементы будут одинаковы

00:41:26

их у нас три

00:41:27

и суммарный размер 900 пикселей общей

00:41:30

ширины в целом достаточно но когда мы

00:41:33

начнем сужать окно можно увидеть как в

00:41:36

пропорции элементы будут уменьшаться

00:41:38

самый маленький 3 так как его значение

00:41:41

flex schwing равно трем а следовательно

00:41:44

он готов отдать больше всего

00:41:46

пространства ну и самый большой это

00:41:48

первый так как у него flex showing

00:41:50

единица заключительное свойства оно же и

00:41:54

самое простое это flex basic просто

00:41:58

определяет размер элемента

00:41:59

до распределения свободного пространства

00:42:02

его отличительная особенность это

00:42:04

определение размеров по оси другими

00:42:07

словами при горизонтальном расположении

00:42:09

оси он устанавливает ширину а при

00:42:13

вертикальном высоту определять размер

00:42:16

можно в пикселях процентах m&m и так

00:42:20

далее значение по умолчанию это аута как

00:42:23

и говорил все просто в дополнение flexx

00:42:26

бокс предоставил еще одно свойство

00:42:28

которое объединяет три ранее описанных

00:42:31

называется она просто flex и выглядит

00:42:34

следующим образом три аргумента это flex

00:42:38

гром в нашем случае мы говорим что если

00:42:40

в контейнере будет свободное

00:42:41

пространство а это мы должны его забрать

00:42:44

flex frank равное нулю это жадные

00:42:47

элементы случае нехватки ширины свои

00:42:49

размеры а не отдавать не будут последние

00:42:52

flex basic это дефолтный размер элемента

00:42:55

именно такую сокращенную запись можно

00:42:58

чаще всего встретить в проектах и теперь

00:43:01

вы знаете что каждый аргумент внутренние

00:43:04

обозначает и как работает в данном видео

00:43:07

мы рассмотрим с вами

00:43:08

заключительное свойство которое отвечает

00:43:11

за задание порядка flex элементом

00:43:14

называется она

00:43:15

ордер и применяются непосредственно на

00:43:18

элемент на экране у нас есть стандартный

00:43:21

layout оси

00:43:22

также направлены по дефолту слева

00:43:25

направо и сверху вниз все flex элементы

00:43:28

идут вдоль главной оси начиная от 1

00:43:31

слева и заканчивая 8 спра

00:43:34

для примера давайте возьмем idem 1 то

00:43:37

есть первый элемент по умолчанию все

00:43:40

flex элементы получает значение ордер

00:43:43

равное нулю

00:43:44

поэтому они идут друг за другом но если

00:43:47

у первого элемента мы зададим значение в

00:43:50

единицу то он переместится в самый конец

00:43:53

здесь вступает в силу обычный

00:43:55

математический счет сначала идут

00:43:57

элементы с наименьшими индексами затем с

00:44:00

наибольшими

00:44:01

то есть сначала располагается элементы

00:44:03

со 2 по 8 индекс которых равен по

00:44:06

умолчанию нулю а затем идет первый

00:44:09

элемент индекс которого теперь равен

00:44:11

единице

00:44:12

также имейте ввиду что свойства ордер

00:44:15

может принимать и отрицательное значение

00:44:18

например давайте седьмой элемент

00:44:20

переместим самое начало для этого

00:44:23

достаточно задать его значение ордер

00:44:25

равное минус 1 и еще раз повторим

00:44:28

механизм сначала идет седьмой элемент с

00:44:31

индексом -1 затем элементы со 2 по 8 с

00:44:36

индексом 0 и в самом конце первый

00:44:39

элемент с индексом 1 еще один пример

00:44:42

давайте четвертый и пятый элемент и

00:44:45

переместим самый конец для этого

00:44:47

достаточно задать им индексы равные

00:44:50

единице но предположим нам нужен порядок

00:44:53

не 145 e 154

00:44:57

то есть четвёртый элемент должен быть

00:44:59

последним все что нужно сделать это

00:45:02

просто задать ему большее значение для

00:45:04

ордер например 2 и в этом случае он

00:45:08

будет идти в самом конце таким образом

00:45:11

используя свойство ордер с различными

00:45:13

значениями мы можем создавать абсолютно

00:45:16

любой порядок для flex элементов

00:45:19

определяя значение каждого индивидуально

00:45:22

для того чтобы понять как

00:45:23

ордер может быть полезен на практике

00:45:25

давайте рассмотрим пример максимально

00:45:28

приближенной к реальной задачи в

00:45:30

разметке оставим только три элемента

00:45:32

изменим цифры на значение a site main

00:45:36

inside

00:45:37

то есть создадим 3 колоночный макет

00:45:40

закомментируем указанной ранее порядок

00:45:43

элементов таким образом мы получили

00:45:46

глобальный layout

00:45:47

давайте сделаем его отзывчивым для этого

00:45:50

используя медиазапрос укажем что если

00:45:53

ширина окна будет меньше 650 пикселей то

00:45:57

наш 3 колоночный макет должен идти в

00:45:59

одну колонку

00:46:00

то есть перестроиться под мобильные

00:46:02

устройства но это еще не все так как

00:46:05

помимо перестроения я хочу изменить и

00:46:08

порядок блоков таким образом чтобы

00:46:11

основная часть была 1 а блоки я сайт шли

00:46:14

за ней

00:46:15

зная свойства ордер нет ничего проще

00:46:17

внутри медиазапрос а мы выбираем второй

00:46:21

элемент так как это именно main и указываем

00:46:24

значение для ордер равной минус 1 в

00:46:27

результате на мобильных устройствах

00:46:29

основная секция идет сверху

00:46:32

а на десктопах она будет идти между двух

00:46:35

секций а сайт и это было заключительное

00:46:38

свойства в технологии flash xbox если

00:46:41

под суммировать все рассмотренные за

00:46:43

предыдущие лекции свойства то список

00:46:46

будет выглядеть следующим образом

00:46:48

для начала свойства flex контейнера

00:46:50

flexx direction определяет направление

00:46:53

главной оси

00:46:54

flex wrap разрешает перенос элементов на

00:46:58

новый ряд

00:46:59

если в текущем недостаточно места flex

00:47:02

flow объединительные свойства для flex

00:47:04

direction и flex раб get задает пустое

00:47:08

пространство между элементами джозефа и

00:47:11

контент выравнивает элементы по основной

00:47:15

оси и line

00:47:16

idem ст выравнивает элементы по

00:47:19

поперечной оси и line контент

00:47:21

предназначена для выравнивания

00:47:23

многострочные элементов вдоль поперечной

00:47:26

оси

00:47:27

следующий блок это свойство flex

00:47:29

элементов line сел выравнивание элемента

00:47:33

по поперечной оси

00:47:34

flex гроу указывает сколько свободного

00:47:38

пространства будет забирать элемент flex

00:47:41

schwing указывает на то каким

00:47:44

пространством элемент готов поделиться

00:47:46

flex basic устанавливает размера

00:47:49

элемента flex объединительные свойства

00:47:52

для flex гра

00:47:54

flex frank рефлекс basic и

00:47:56

заключительная

00:47:57

ордер определяет порядок элементов и в

00:48:00

этом видео мы рассмотрим каким образом

00:48:03

flex элементы можно вкладывать друг в

00:48:05

друга а также разберем несколько

00:48:08

интересных кейсов

00:48:09

их взаимодействия при задании размеров и

00:48:12

переносов

00:48:13

и начнем мы с вложенности на экране вы

00:48:16

можете видеть уже знакомый вам flex

00:48:18

контейнер внутри которого находятся три

00:48:20

flex элемента внутри 2 дополнительно

00:48:23

находится еще два вложенных дива

00:48:25

все дело в том что flex элемент очень

00:48:29

легко превратить во flex контейнер

00:48:30

давайте наш второй div разместим по

00:48:33

центру чтобы показать что внутренние

00:48:35

преобразование никак не повлияет на его

00:48:38

связь с контейнером для этого я

00:48:40

воспользуюсь свойствам и line сел со

00:48:43

значением сенджу

00:48:44

теперь наш элемент центрирован по

00:48:46

вертикали внутри контейнера для того

00:48:49

чтобы так же превратить его во flex

00:48:51

контейнер достаточно просто добавить

00:48:53

свойство дисплей со значением flex или

00:48:56

inline flex и все теперь второй элемент

00:48:59

также является flex контейнером это

00:49:02

видно даже визуально

00:49:03

так как блоки находящиеся внутри

00:49:06

перестали занимать всю ширину

00:49:07

а подстроились под размер контента и

00:49:10

теперь мы спокойно можем применять все

00:49:12

свойства доступные для контейнера

00:49:14

например выровнять их по центру причем

00:49:17

если внутрь вложенных элементов мы

00:49:19

добавим ещё элемент и и за хотим

00:49:22

превратить это все в контейнер то для

00:49:24

этого опять же будет достаточно просто

00:49:26

добавить свойство дисплее flex

00:49:28

основная идея заключается в том что

00:49:30

любой элемент на странице даже flex

00:49:33

элемент можно превратить в контейнер

00:49:35

flex бокс не вводит никаких ограничений

00:49:38

на такие манипуляции отлично сложностью

00:49:42

разобрались переходим к многострочный

00:49:44

элементом для этого я верну нашу

00:49:46

стандартную разметку содержащую 8

00:49:48

альбомов

00:49:49

удалю ненужные свойства и растягивания

00:49:52

контейнера на всю высоту экрана а также

00:49:55

установлю размер элементов 200 пикселей

00:49:57

используя свойство flex b cis

00:50:00

вы помните по умолчанию если в

00:50:02

контейнере не разрешен перенос элементов

00:50:05

то установлены для них размер на

00:50:07

небольших экранах будет игнорироваться и

00:50:09

все они будут идти в одну линию для того

00:50:12

чтобы разрешить перенос устанавливаем

00:50:14

для контейнера свойства flex wrap со

00:50:17

значением wrap

00:50:18

в результате у нас получается три строки

00:50:21

элементы растянуты на 200 пикселей и

00:50:24

справа можно видеть свободное

00:50:26

пространство мы уже знаем как его можно

00:50:28

убрать для этого достаточно добавить

00:50:30

свойство flex кроу со значением 1

00:50:33

смотрите как ведут себя элементы

00:50:35

обобщенно можно сказать что все они

00:50:38

растянулись занял свободное пространство

00:50:40

это касается как элементов первых двух

00:50:43

рядах так и в последнем в котором они

00:50:45

растянулись больше всего так как их там

00:50:48

два они 3

00:50:49

причем если мы начнем изменять размер

00:50:51

окна вы можете увидеть как элементы

00:50:54

перепрыгивают и в конечном итоге все

00:50:56

равно занимает всю доступную ширину

00:50:58

экрана собственно поэтому данная технология и

00:51:01

называется flex бокс или гибкие блоки

00:51:04

а теперь мы возьмем третий элемент и

00:51:06

зададим ему flex кроу со значением 5 и

00:51:09

что мы видим увеличился размер 3

00:51:12

элемента произошло это в первом ряду все

00:51:16

остальные элементы в других рядах никак

00:51:18

не отреагировали на эти изменения а

00:51:20

теперь если мы начнем изменять размер

00:51:23

окна и третий блок будет прыгать на

00:51:25

новый ряд

00:51:26

то только в этом ряду будут происходить

00:51:29

изменение ширины

00:51:30

остальных элементов а теперь давайте

00:51:33

изменим направление основной оси сделаем

00:51:36

мы это с помощью свойства flex direction

00:51:38

со значением калом в результате все

00:51:41

вложенные элементы растянулись на высоту

00:51:44

в 200 пикселей

00:51:45

произошло это за счет свойства flex

00:51:47

basic другими словами мы определили

00:51:49

размер вложенного блока и при изменении

00:51:52

направления основной оси этот размер

00:51:55

перешел из ширины

00:51:57

высоту если бы ширину мы определили

00:52:00

cherry sweets то такого эффекта бы не получилось это

00:52:03

еще один аргумент почему для задания

00:52:06

размеров лучше всего использовать

00:52:07

свойство flex или flex basic в этом

00:52:10

случае нам не нужно будет прибегать к

00:52:12

дополнительным

00:52:13

популяциям шириной и высотой элементов

00:52:16

самые внимательные могли заметить один

00:52:19

нюанс несмотря на то что для третьего элемента

00:52:22

определен большей flex grow

00:52:24

по высоте он такой же как и остальные

00:52:26

все верно так как теперь мы растягиваем

00:52:29

элементы не по ширине и по высоте чтобы

00:52:32

убедиться в том что flex гроу все еще

00:52:34

работает закомментируем разметки 5

00:52:37

блоков размер для элементов установим

00:52:40

100 пикселей чтобы лучше было видно и

00:52:43

что самое важное растянем контейнер по

00:52:46

высоте экрана

00:52:47

как вы можете видеть теперь третий блок

00:52:50

стал занимать самое большое пространство

00:52:52

когда в этом мы убедились давайте

00:52:54

раскомментируем

00:52:55

остальные блоки и посмотрим на результат

00:52:58

у нас получилось две колонки

00:53:00

так как перенос по-прежнему разрешен 7 и

00:53:03

8 блоки занимают большую высоту так как

00:53:06

растягиваются на всю доступную высоту во

00:53:09

второй колонке

00:53:10

а третий элемент занимает большую высоту

00:53:13

чем остальные в первой колонке

00:53:16

если теперь мы по изменяем размер окна

00:53:18

по вертикали то можно увидеть картинку

00:53:21

когда элемент не помещающиеся по высоте

00:53:24

100 пикселей который определена во flex

00:53:26

basic будет переноситься на следующий

00:53:29

ряд и в этом видео мы разберем несколько

00:53:31

практических задач которая очень часто

00:53:34

можно встретить на реальных проектах и

00:53:36

которая очень легко решается с помощью

00:53:39

flexx бокс начнем с построения

00:53:41

глобального трех колонн очного лейаута

00:53:43

для примеров я буду использовать

00:53:46

градиенты и подписи чтобы разделение

00:53:48

элементов было более наглядно на экране

00:53:51

вы можете видеть три глобальных блока

00:53:53

это хедер который должен занимать всю

00:53:56

ширину экрана блок main который содержит

00:53:59

два а сайт элемента и секцию с основным

00:54:02

контентом

00:54:03

третий блок это footer который также

00:54:06

должен быть растянут на всю ширину все

00:54:08

эти элементы находятся внутри корневого

00:54:11

блока div итак поехали для начала

00:54:14

определяем flex контейнер делается это с

00:54:17

помощью класса и свойства дисплей со

00:54:19

значением flex

00:54:21

далее изменяем направление основной оси

00:54:24

на вертикальное указываем flex direction

00:54:28

со значением калом в данный момент мы

00:54:31

получили аналогичный результат который

00:54:34

был в самом начале внутри main

00:54:36

определяем еще один контейнер

00:54:38

а свободное пространство распределяем

00:54:41

между тремя блоками внутри

00:54:42

причем в пропорции один к трем чтобы

00:54:46

основная часть была шире остальных и

00:54:48

вуаля 3 колоночный макет готов для

00:54:52

полного соответствия можно сделать

00:54:54

корневой контейнер растянутым по высоте

00:54:57

и для основной секции способность

00:54:59

забирать свободное пространство

00:55:01

делается это с помощью свойства flex со

00:55:04

значением 1 а я напомню что единица

00:55:07

определяет свойства flex гроу которая и

00:55:10

отвечает за то что элемент будет

00:55:12

забирать все доступное место теперь

00:55:14

давайте добавим немного отзывчивости

00:55:17

чтобы например при ширине экрана в 650

00:55:20

пикселей

00:55:21

наш layout перестраивался в 1 колоночный

00:55:23

на самом деле это очень просто сделать

00:55:26

так как header и footer уже занимает всю

00:55:29

ширину или одну колонку и все что нам

00:55:32

нужно сделать это перестроить main

00:55:34

секцию определяем медиазапрос внутри

00:55:37

которого указываем что main должно

00:55:40

изменить свое направление со строки на

00:55:43

колонку теперь у нас есть отзывчивый 3

00:55:46

колоночный макет для мобильника

00:55:48

мы также можем изменить порядок

00:55:50

элементов то есть делать чтобы за

00:55:52

федором сразу шла основная секция

00:55:55

и только потом дополнительные секции а

00:55:57

сайт для этого достаточно добавить одно

00:56:01

свойство ордер со значением минус 1

00:56:03

кстати милая ути заложен еще один

00:56:06

полезный секрет называется он прибитый к

00:56:09

низу footer а это значит что если мы

00:56:12

удалим весь контент внутри секции me in

00:56:14

the footer так и останется внизу и

00:56:17

поверьте до появления flexmax создать

00:56:21

layout с такой функциональностью была

00:56:23

очень непростой задачей здесь же

00:56:26

определяя буквально одно свойство мы

00:56:29

добавляем новую логику следующий пример

00:56:31

будет полегче это центрированием

00:56:33

модального окна

00:56:35

рассмотрим базовые стили будущий flex

00:56:37

контейнер выполняют роль

00:56:39

оверлея это подложка которая идет под

00:56:42

любым модальным окном для того чтобы с

00:56:45

помощью затемнения или осветление

00:56:47

визуально выделять моталку в примере мы

00:56:50

используем затемнение с помощью черного

00:56:52

цвета и прозрачности а для модального

00:56:55

окна я просто определил дефолтные

00:56:58

размеры

00:56:59

все что осталось сделать это добавить

00:57:01

буквально три свойства для контейнера

00:57:04

первым мы превращаем его в flex

00:57:06

контейнер вторым выравниваем по

00:57:09

горизонтали третьим по вертикали и все

00:57:12

центрированный блок можно использовать

00:57:15

верстки следующий пример это гибкая

00:57:17

медия карточка в нашем случае она будет

00:57:20

содержать картинку и небольшую подпись

00:57:23

сама карточка это будет flex контейнер

00:57:26

сразу определяем выравнивание по

00:57:28

вертикали и свойства для установки

00:57:31

направления главной оси и в заключение

00:57:33

добавляем пространство между блоками для

00:57:36

контента просто указываем flex гром

00:57:38

равная единице что у нас получилось

00:57:41

изменяя line

00:57:43

ой там мы управляем положением текста и

00:57:46

можем перемещать его или вниз или

00:57:49

выровнять по центру вместе с картинкой а

00:57:51

изменив flex direction на реверс текст и

00:57:55

картинку мы поменяем местами

00:57:57

настраиваемая карточка готова и

00:58:00

заключительный пример создание сайдбара

00:58:03

с разделенной навигацией sidebar

00:58:05

это блок прилеплены к одному из краев

00:58:07

экрана внутри которого находится

00:58:10

какой-то контент в нашем случае это

00:58:12

будет навигация причем не просто

00:58:15

навигация в которой элементы идут друг

00:58:17

за другом а разделенное на два отдельных

00:58:19

блока 1 будет содержать вкладке home

00:58:22

пост и about ass

00:58:25

второй settings и логин первое что мы

00:58:28

сделаем как обычно создаем глобальный

00:58:31

контейнер

00:58:32

растягиваем его на всю высоту экрана

00:58:34

теперь переходим к блоку а сайт который

00:58:38

содержит основную навигацию не обращайте

00:58:40

внимание что в примере я использую

00:58:42

обычные де в блоке представим что это

00:58:44

действительно реальные ссылки для начала

00:58:47

задаем минимальный размер для сайдбаров

00:58:49

например 280 пикселей

00:58:51

далее также превращаем его во flex

00:58:54

контейнер определяем направление

00:58:56

элементов колонку и последним свойствам

00:59:00

добавляем пространство между ними

00:59:02

sidebar с разделенной навигации готов и

00:59:04

как обычно на это потребовалось

00:59:07

буквально пару свойств в общем и целом

00:59:10

это все что я планировал вам рассказать

00:59:12

в данном курсе все необходимые свойства

00:59:15

и их комбинации мы подробно разобрали в

00:59:18

качестве дальнейших шагов изучения

00:59:20

советую рассмотреть

00:59:21

css grid как альтернативу построения

00:59:24

глобального лейаута и обязательно

00:59:27

загляните в плейлист css inspiration

00:59:29

так как там можно найти кучу крутых

00:59:32

примеров и множество различных

00:59:34

интересных эффектов весь код и полезные

00:59:37

ссылки вы найдёте в git хоп репозиторий

00:59:39

и если у вас остались какие либо вопросы

00:59:42

то обязательно задавайте их комментариях

00:59:44

не забывайте поставить лайк и

00:59:46

подписаться на канал и увидимся уже в

00:59:49

новом курсе лекций пока

Описание:

В данном видеокурсе мы с вами рассмотрим технологию Flexbox. Flexible Box Layout Module (Flexbox) - представляет собой способ компоновки элементов, в основе лежит идея оси. Другими словами все элементы можно располагать вдоль основной и поперечной осей, или вертикально и горизонтально. Технология позволяет буквально в пару свойств создать гибкий лэйаут, или гибкие UI элементы. ✒ Репозиторий курса: ✔ GitHub: https://github.com/YauhenKavalchuk/css-flexbox ✒ Timeline: ✔ 0:00 - Введение ✔ 2:39 - Основные понятия ✔ 8:12 - Направление осей ✔ 12:36 - Обёртка элементов и отступы ✔ 18:46 - Выравнивание вдоль главной оси ✔ 25:07 - Выравнивание вдоль поперечной оси ✔ 29:09 - Многострочное выравнивание ✔ 33:06 - Индивидуальное выравнивание элементов ✔ 37:36 - Размеры элементов ✔ 43:06 - Определение порядка элементов ✔ 48:00 - Вложенность. Обёртка элементов с размерами ✔ 53:29 - Практические примеры использования Flexbox ✒ Полный список готовых и планируемых курсов: ✔ Trello: https://trello.com/b/R6rD7qq8 ✒ Автор курса: ✔ YouTube: https://www.youtube.com/YauhenKavalchuk ✔ Instagram: https://www.facebook.com/unsupportedbrowser ✔ Twitter: https://twitter.com/YauhenKavalchuk ✔ VK: https://vk.com/YauhenKavalchuk ✔ LinkedIn: https://www.linkedin.com/in/YauhenKavalchuk ✔ GitHub: https://github.com/YauhenKavalchuk ✔ VK (Группа): http://vk.com/webdevcom ✒ Поддержать развитие канала: https://github.com/YauhenKavalchuk/youtube/blob/main/sponsoring.md

Готовим варианты загрузки

Популярные

HD видео

Только звук

Все форматы

* — Если видео проигрывается в новой вкладке, перейдите в неё, а затем кликните по видео правой кнопкой мыши и выберите пункт "Сохранить видео как..."

** — Ссылка предназначенная для онлайн воспроизведения в специализированных плеерах

Вопросы о скачивании видео

Как можно скачать видео "CSS Flexbox. Полный курс"?

Сайт http://unidownloader.com/ — лучший способ скачать видео или отдельно аудиодорожку, если хочется обойтись без установки программ и расширений. Расширение UDL Helper — удобная кнопка, которая органично встраивается на сайты YouTube, Instagram и OK.ru для быстрого скачивания контента.
Программа UDL Client (для Windows) — самое мощное решение, поддерживающее более 900 сайтов, социальных сетей и видеохостингов, а также любое качество видео, которое доступно в источнике.
UDL Lite — представляет собой удобный доступ к сайту с мобильного устройства. С его помощью вы можете легко скачивать видео прямо на смартфон.

Какой формат видео "CSS Flexbox. Полный курс" выбрать?

Наилучшее качество имеют форматы FullHD (1080p), 2K (1440p), 4K (2160p) и 8K (4320p). Чем больше разрешение вашего экрана, тем выше должно быть качество видео. Однако следует учесть и другие факторы: скорость скачивания, количество свободного места, а также производительность устройства при воспроизведении.

Почему компьютер зависает при загрузке видео "CSS Flexbox. Полный курс"?

Полностью зависать браузер/компьютер не должен! Если это произошло, просьба сообщить об этом, указав ссылку на видео. Иногда видео нельзя скачать напрямую в подходящем формате, поэтому мы добавили возможность конвертации файла в нужный формат. В отдельных случаях этот процесс может активно использовать ресурсы компьютера.

Как скачать видео "CSS Flexbox. Полный курс" на телефон?

Вы можете скачать видео на свой смартфон с помощью сайта или pwa-приложения UDL Lite. Также есть возможность отправить ссылку на скачивание через QR-код с помощью расширения UDL Helper.

Как скачать аудиодорожку (музыку) в MP3 "CSS Flexbox. Полный курс"?

Самый удобный способ — воспользоваться программой UDL Client, которая поддерживает конвертацию видео в формат MP3. В некоторых случаях MP3 можно скачать и через расширение UDL Helper.

Как сохранить кадр из видео "CSS Flexbox. Полный курс"?

Эта функция доступна в расширении UDL Helper. Убедитесь, что в настройках отмечен пункт «Отображать кнопку сохранения скриншота из видео». В правом нижнем углу плеера левее иконки «Настройки» должна появиться иконка камеры, по нажатию на которую текущий кадр из видео будет сохранён на ваш компьютер в формате JPEG.

Сколько это всё стоит?

Нисколько. Наши сервисы абсолютно бесплатны для всех пользователей. Здесь нет PRO подписок, нет ограничений на количество или максимальную длину скачиваемого видео.