background top icon
background center wave icon
background filled rhombus icon
background two lines icon
background stroke rhombus icon
header logo icon

Скачать "Flexbox or grid - How to decide?"

input logo icon
"videoThumbnail Flexbox or grid - How to decide?
Оглавление
|

Оглавление

0:00
Introduction
1:13
Comparing their behaviors
9:54
When you should use flexbox
13:40
When you should use grid
17:23
Mixing flexbox and grid
Похожие ролики из нашего каталога
|

Похожие ролики из нашего каталога

Теги видео
|

Теги видео

Kevin Powell
css
front-end
frontend
html
tutorial
css grid
css grid vs flexbox
grid vs flexbox
css grid tutorial
flexbox vs grid
flexbox vs css grid
web development
css flexbox tutorial
responsive web design
css flexbox vs grid
css grid layout
css layout
css grid and flexbox
css flexbox and grid tutorial
Субтитры
|

Субтитры

subtitles menu arrow
  • enАнглийский
Скачать
00:00:00
Сетка flexbox у нас есть два замечательных
00:00:03
инструмента макета, когда мы пишем
00:00:04
CSS в наши дни, но
00:00:07
подождите, почему у нас есть два инструмента макета,
00:00:10
ну, дело в том, что мы все знаем, когда нам
00:00:11
следует надеть пару
00:00:13
кроссовок или классических туфель. и это
00:00:15
немного похоже, когда мы думаем о
00:00:16
флексбоксе и о сетке. Обе вещи
00:00:18
создают макеты, как обувь, или
00:00:20
обе вещи, которые мы надеваем на ноги, но
00:00:22
они обе служат разным целям и
00:00:24
имеют разные сильные и
00:00:25
слабые стороны, так что в этом видео, мы собираемся
00:00:27
рассмотреть различия между
00:00:28
ними, мы собираемся изучить их
00:00:29
и посмотреть, в каких ситуациях какой из них
00:00:32
работает лучше всего, поэтому, когда вы создаете свои
00:00:33
макеты, это просто упрощает
00:00:35
для вас принятие решения, и я собираюсь дайте вам
00:00:36
небольшой обзор, это не обязательно,
00:00:38
но одномерный макет по сравнению с
00:00:39
двухмерным, по крайней мере, не в том
00:00:41
смысле, в котором вы обычно думаете
00:00:43
об этом,
00:00:46
привет, мой друг и друзья, и добро пожаловать
00:00:48
обратно к еще одному видео, я так рад,
00:00:50
что вы Я снова присоединился ко мне,
00:00:52
и если вы здесь новичок, меня зовут Кевин,
00:00:53
и здесь, на моем канале, я надеюсь, что вы
00:00:55
безумно сильно влюбитесь в CSS, и я
00:00:57
не могу заставить вас влюбиться в него, я
00:00:58
надеюсь чтобы, по крайней мере, вас это немного
00:00:59
меньше расстраивало, и один из
00:01:02
способов сделать это —
00:01:03
понять, какой инструмент подходит
00:01:05
для этой работы, и мы
00:01:07
сможем сделать это сегодня, разобрав
00:01:08
flexbox. по сравнению с сеткой, так что давайте углубимся
00:01:11
прямо в код и посмотрим на
00:01:12
них, все в порядке, и вот мы в codepen,
00:01:14
мы собираемся рассмотреть несколько разных
00:01:16
примеров. Этот первый пример больше предназначен
00:01:18
для того, чтобы дать нам общее представление о
00:01:19
различия между ними и некоторыми
00:01:21
стандартными моделями поведения
00:01:23
и немного изучить, что они делают
00:01:24
похоже, что они делают по-другому, и мы
00:01:25
собираемся перейти к другим примерам, где,
00:01:27
я думаю, больше реальных ситуаций,
00:01:29
которые показывают, где могут проявиться эти сильные стороны
00:01:31
и способы
00:01:33
их использования, и прямо здесь вы можете видеть, что у меня
00:01:35
есть настройка с flex и сеткой,
00:01:37
и, по сути, внутренняя работа
00:01:39
каждого из них абсолютно одинакова,
00:01:41
и поэтому у меня есть гибкий контейнер
00:01:44
прямые дочерние элементы здесь, и нам даже не
00:01:45
нужны эти закомментированные, поэтому давайте
00:01:47
просто удалим их,
00:01:48
и чтобы у нас были одни и те же дочерние элементы
00:01:50
в обоих, так что мы можем просто
00:01:52
убедиться, что мы находимся на равных правилах игры,
00:01:54
и поэтому, если мы придем здесь, в гибком
00:01:56
контейнере, и мы включаем отображение
00:01:57
гибкого интерфейса, он просто делает несколько столбцов, гибкий
00:02:00
выполняет свою функцию, и мы получаем кучу
00:02:02
столбцов, они вроде как отзывчивы,
00:02:04
они сжимаются, они немного растут, они
00:02:06
вроде как гибкие вещи,
00:02:08
как следует из названия, они будут, и одна
00:02:10
вещь, которую важно знать с помощью
00:02:12
flexbox, это то, что каждый прямой дочерний элемент
00:02:14
станет столбцом, даже если это означает, что
00:02:16
будет некоторое переполнение, и это означает, что
00:02:18
мы можем получить некоторую горизонтальную
00:02:20
прокрутку с помощью flexbox, когда мы вы не
00:02:22
осторожны с этим, поэтому важно
00:02:24
принять это к сведению, тогда как сетка, которая
00:02:26
по умолчанию не создаст такой проблемы,
00:02:28
потому что, когда вы ее включаете,
00:02:30
ничего не происходит,
00:02:32
и это потому, что при
00:02:34
отображении гибкого контейнера по
00:02:36
умолчанию здесь используется flex. гибкое направление строки,
00:02:40
и это означает, что родительским элементом является строка, поэтому
00:02:43
главной осью является строка, и это означает, что
00:02:45
все дочерние элементы внутри нее
00:02:47
становятся столбцами, но
00:02:49
здесь мы выбираем наш гибкий контейнер, поэтому
00:02:51
мы говорим, что наш гибкий контейнер контейнер — это строка,
00:02:53
поэтому дочерние элементы становятся столбцами,
00:02:55
что противоположно поведению, которое мы
00:02:56
имеем в сетке, где сетка поведением по умолчанию
00:02:59
является
00:03:01
автоматический поток строк сетки,
00:03:03
и в этом случае он создает
00:03:05
строки, и все они накладываются друг на
00:03:07
друга, поэтому на самом деле мы могли бы получить
00:03:09
поведение, очень похожее на flexbox,
00:03:11
изменив автоперемещение на столбец, и
00:03:13
вы заметите, что
00:03:14
они почти одинаковы, не совсем, но
00:03:17
они почти одинаковы, когда мы это делаем,
00:03:18
и это довольно интересно, вы
00:03:20
увидите, что они они как бы растут и
00:03:21
сжимаются очень похожим образом, но
00:03:23
между ними есть несколько небольших странных различий,
00:03:26
которые мы не собираемся вдаваться в
00:03:27
подробности в этом видео, но на это
00:03:29
важно обратить внимание, и если мы когда-нибудь
00:03:31
сделаем это, это это приведет к такой
00:03:32
ситуации, когда в обоих из них мы в какой
00:03:34
-то момент столкнемся с этим переполнением
00:03:36
из-за того, как они работают, и
00:03:38
если вы знакомы с flexbox, у вас
00:03:40
может быть все хорошо, я могу предотвратить
00:03:41
такое поведение, но я есть
00:03:43
отображение гибкости, мне не нужно
00:03:45
переполнение, поэтому я могу сделать гибкую обертку,
00:03:48
и вот так, теперь, если вещам не хватает
00:03:50
места, они все равно будут хорошо, они
00:03:52
больше не будут такими мягкими, пока мы не доберемся
00:03:54
до этого точка, но они действительно обтекают,
00:03:56
и вместо этого они делают эту обертку,
00:03:58
и я пойму, почему они ведут себя таким
00:04:00
образом, всего за секунду, но давайте
00:04:03
перейдем к сетке и давайте на самом деле изменим
00:04:04
этот автоматический поток сетки здесь,
00:04:06
а вместо этого аналогичное поведение, которое
00:04:08
мы могли бы сделать здесь, - это столбцы шаблона сетки.
00:04:10
Я собираюсь сначала сделать простую
00:04:11
версию, а затем мы сделаем ее
00:04:13
более интересной, ну, и часто то, что вы
00:04:16
часто увидите здесь, - это один fr, как несколько
00:04:18
раз что-то например, что
00:04:19
даст нам в данном случае пять столбцов, и
00:04:22
это всего лишь пять столбцов, несмотря ни на что,
00:04:24
и они делают свои пять столбцов,
00:04:26
и все, и, конечно, вы
00:04:28
приходите сюда и упрощаете это,
00:04:30
повторяя пять один fr, и тогда у нас есть
00:04:33
пять столбцов, или мы можем сделать четыре,
00:04:35
что вам нужно, и вот мы идем, мы получаем
00:04:38
столбцы и оборачиваем
00:04:39
контент, но он не
00:04:40
автоматически переносит правильно, у нас есть эти
00:04:42
гм, они просто типа того, что у нас есть четыре
00:04:45
столбца, мы застряли на четырех столбцах,
00:04:46
есть классная вещь, и я не
00:04:48
буду углубляться в это в этом видео,
00:04:50
потому что я много говорил об этом в
00:04:51
других видео, и если вам что-то из
00:04:53
этого нужно, вот более подробные уроки по гибкому боксу и
00:04:55
сетке приведены в описании ниже,
00:04:57
но я также напомню вам об этом в
00:04:59
конце, но с помощью этого автоподбора
00:05:01
вы можете сделать мин-максимум здесь и
00:05:03
так далее в середине-максимуме, здесь мы даем ему два
00:05:04
значения самый маленький, который мы хотим, чтобы они получили,
00:05:06
и самый большой, который мы хотим, чтобы они получили,
00:05:08
скажем, у них минимальный размер
00:05:10
300 пикселей, потому что почему бы и нет, и максимальный
00:05:13
размер 1fr,
00:05:15
и теперь мы действительно увидим, что
00:05:17
мы получаем другое количество столбцов, и
00:05:19
они собираются обернуться, это не совсем
00:05:20
похоже на поведение flexbox, но мы
00:05:22
получаем что-то вроде поведения обертывания, когда они
00:05:24
сворачиваются, и они идут вниз, вниз и
00:05:26
вниз, а затем возвращаются таким образом,
00:05:29
и это действительно важный момент Чтобы
00:05:31
посмотреть на этот флексбокс по сравнению с сеткой, и
00:05:33
две важные вещи, которые следует учитывать прямо
00:05:34
сейчас: речь не обязательно идет о
00:05:38
макете 1d или 2d, как мы часто слышим, и
00:05:40
это потому, что если вы посмотрите здесь, у нас на
00:05:42
самом деле есть флексбокс, создающий
00:05:44
двухмерный макет в здесь,
00:05:47
а затем здесь, у нас есть сетка, которая также
00:05:49
создает двумерный макет, и
00:05:51
они делают это по-разному, и у
00:05:52
них разные ограничения,
00:05:54
которые они создают по-разному,
00:05:56
но важно знать, что flexbox
00:05:58
может обертывать и flexbox может делать то, что мы
00:06:00
считаем двумерным макетом, но
00:06:02
важно то, что это
00:06:04
способ управления этим
00:06:06
одномерным макетом, и один из
00:06:08
способов, которым мы можем думать об этом, - это каждая
00:06:10
из этих строк не зависит от
00:06:12
следующего,
00:06:13
поэтому, если мы сожмемся сюда, как этот
00:06:15
столбец, здесь у нас будет очень узкий столбец,
00:06:17
здесь у нас есть большой столбец, здесь у нас есть
00:06:19
еще больший столбец, тогда у нас будет что-то
00:06:21
вроде этого, средний, большой, но вот
00:06:23
так этот столбец не смотрит ни на
00:06:26
что над ним ни на что под ним
00:06:28
эта строка не зависит от строки
00:06:30
над ней она не зависит от строки
00:06:32
под ней
00:06:33
сетка не работает таким образом
00:06:35
сетка настраивает элементы в
00:06:37
двухмерной сетке, поэтому столбцы
00:06:39
заперты в этом есть только это
00:06:42
маленькое короткое слово, но этот столбец
00:06:43
растягивается, чтобы соответствовать другим столбцам
00:06:46
вокруг него, или когда у нас их три или
00:06:48
четыре, столбец в этой строке
00:06:50
должен быть таким же, как столбец в этой
00:06:52
Теперь вы можете делать такие вещи, как охват
00:06:54
нескольких столбцов, но они по-прежнему привязаны
00:06:57
к двумерной сетке, и вы не
00:06:59
можете использовать такие вещи, как промежуточные столбцы.
00:07:01
Строки также работают таким образом, где вы
00:07:03
не можете получить эти промежуточные строки.
00:07:05
как вы могли подумать в макете каменной
00:07:07
кладки, хотя в конечном итоге это
00:07:09
часть спецификации сетки третьего уровня, поэтому мы
00:07:11
получим макет каменной кладки, который
00:07:13
откроет некоторые интересные двери с помощью CSS,
00:07:15
только надеюсь, что это не займет слишком много времени,
00:07:17
но сначала нам нужна подсетка,
00:07:18
потому что это часть второго уровня
00:07:20
спецификации, но я забегаю вперед,
00:07:22
давайте не будем слишком беспокоиться об этом
00:07:23
прямо сейчас,
00:07:24
хм, но я просто хочу посмотреть здесь и что-то вроде того, что
00:07:26
вы можете подумать, что вы
00:07:28
уже вижу, что сетки немного более
00:07:29
структурированы, а flexbox немного
00:07:31
более гибок,
00:07:33
а теперь давайте просто перейдем сюда
00:07:35
и внесем быстрые изменения, но есть
00:07:36
интересная вещь: если я действительно хочу
00:07:38
изменить то, как все здесь ведет себя,
00:07:40
немного, я на самом деле не могу сделать
00:07:42
здесь намного больше работы, чтобы иметь возможность вносить больше
00:07:45
изменений в гибкие элементы, мне действительно
00:07:47
нужно перейти к детям, и в
00:07:49
этом случае я собираюсь сделать гибкий
00:07:50
контейнер
00:07:52
прямым дочерним элементом и выберите
00:07:54
там каждого дочернего элемента с прямым охлаждением, и это
00:07:56
то, что нам обычно не нужно
00:07:58
делать с um grit, если только вы не собираетесь
00:08:01
выполнять выравнивание внутри ячейки,
00:08:03
тогда как с flexbox вам
00:08:06
очень часто приходится переходить к детям
00:08:08
и установите здесь разные вещи, и
00:08:10
давайте начнем с одной
00:08:11
интересной вещи, которая будет заключаться в
00:08:12
гибком росте здесь из одной,
00:08:15
и это немного сломает вещи, как
00:08:16
вы можете видеть, теперь посмотрите, что
00:08:18
они всегда заполняем все
00:08:19
доступное пространство, мы не занимаемся этими, вы
00:08:21
знаете, этот неровный край, который у нас был до того, как
00:08:23
они все заполняют доступное
00:08:24
пространство,
00:08:25
мы могли бы даже прийти сюда и сказать
00:08:26
гибкую основу
00:08:28
в 100,
00:08:30
э-э, на самом деле этого не произойдет сделать очень
00:08:31
много, давайте подойдем сюда и скажем 33, и
00:08:33
это даст нам три столбца,
00:08:35
но затем этому последнему позволено вырасти,
00:08:36
поэтому он становится больше,
00:08:38
и тогда вы получаете вот такие
00:08:40
интересные вещи, вы знаете, что это
00:08:41
все, он становится слишком маленьким это своего
00:08:44
рода выяснение ситуации самостоятельно, хм, и
00:08:47
снова сетка - это просто структурированная
00:08:49
вещь, она действительно полагается на то, что
00:08:51
родитель говорит ей делать, и
00:08:53
дети живут в
00:08:54
создаваемой сетке, и в чем флексбокс
00:08:57
действительно хорош, и это сводится к
00:08:58
тому, что, прежде чем я устанавливаю их здесь, это
00:09:01
внутренний размер и использование
00:09:02
внутреннего размера элементов, потому что
00:09:05
многое из того, что делает flexbox, смотрит на
00:09:07
это, и когда я говорю «внутренний размер», я
00:09:10
имею в виду, как этот элемент сжимается до такого же размера. такие же
00:09:12
маленькие, как содержимое внутри него,
00:09:15
точно так же, как этот, как этот,
00:09:16
как и все они, они
00:09:18
сжимаются до размера контента, который находится
00:09:20
внутри них, это внутренний
00:09:22
размер элемента, и есть
00:09:25
другие способы иметь внутренний размер, но
00:09:27
здесь и тогда мы можем вы знать, что в
00:09:28
какой-то момент они действительно начнут
00:09:30
сжиматься, потому что им не хватает
00:09:31
места, и это одна из тех действительно
00:09:33
хороших вещей с flexbox, что
00:09:35
поведение по умолчанию для него не блокирует
00:09:37
его так много, тогда как с
00:09:39
внутренним размером сетки есть способы заставить
00:09:41
его там точно так же, как есть способы
00:09:43
борьбы с ним во flexbox, но
00:09:45
по умолчанию он ведет себя так, что
00:09:47
сетка настраивает все, а дочерние элементы
00:09:49
там заполняют пространство, чтобы они
00:09:51
заняли преимущество того пространства, которое
00:09:53
сетка предоставляет ему, так что
00:09:55
все это означает, когда, когда мы
00:09:56
решим, какое из них нам следует использовать, и
00:09:58
я хочу, чтобы вы часто думали,
00:10:00
хочу ли я полагаться на внутренние
00:10:01
размеры чего-то? я хочу, чтобы он был
00:10:03
таким же большим, как он есть, или я хочу иметь
00:10:06
немного больше структурированного контроля с
00:10:08
точки зрения родителей,
00:10:10
и поэтому одна общая вещь, которую мы придумываем, - это
00:10:12
правильная навигация, и здесь я
00:10:13
просто обозначил вещи цветом так что мы можем
00:10:15
немного больше визуализировать то, что
00:10:16
происходит, и у меня просто есть две одинаковые
00:10:19
навигационные панели: одна в заголовке с
00:10:21
классом flex и одна в заголовке с
00:10:23
классом сетки, поэтому мы подойдем сюда
00:10:24
и скажем flex и мы создадим наш навигационный
00:10:26
список, который находится в этом навигационном списке,
00:10:29
и давайте отобразим гибкий интерфейс, а
00:10:32
навигационный список - это мой ul, поэтому они все просто идут
00:10:34
рядом друг с другом, и я специально поместил
00:10:36
эту очень длинную ссылку, просто чтобы выделить
00:10:37
здесь некоторые вещи, и мы можем прийти сюда
00:10:40
и создать сетку,
00:10:41
а затем выбрать мой навигационный список
00:10:43
и давайте отобразить сетку, если вы
00:10:45
помните, что это ничего не делает правильно, и
00:10:48
сразу очевидно, что решение с флексбоксом
00:10:50
здесь просто кажется лучшим,
00:10:51
верно, потому что одна строка кода сортирует
00:10:54
Я получил то, что хотел, тогда как здесь мне нужно
00:10:56
написать больше строк кода, зная
00:10:58
сильные стороны каждой из них, что позволяет вам
00:10:59
идти по счастливому пути, идти по пути
00:11:01
наименьшего сопротивления, где вы не
00:11:02
пытаетесь бороться с тем, с чем вы ты
00:11:04
используешь так много и так сразу, я думаю,
00:11:07
ты знаешь, что это гибкий вариант, посмотри на это, посмотри, что
00:11:09
он просто работает, а потом мы
00:11:10
получаем некоторое переполнение, мы собираемся это исправить,
00:11:12
но мы доходим до того, что происходит, а
00:11:14
потом да, ладно, вот и все на самом деле не
00:11:16
так уж и плохо, а где сетка, окей,
00:11:19
давайте попробуем получить макет сетки, который на
00:11:20
самом деле выглядит нормально, так что мы
00:11:22
войдем, а потом, что ж, я думаю, мы могли бы сделать так,
00:11:23
как я показывал вам перед колонкой автоматического перемещения сетки
00:11:26
здесь и там, мы да, оно
00:11:28
приближается, но расстояние между ними какое
00:11:30
-то странное, и ну, вы знаете, что у нас на
00:11:32
самом деле есть зазор с гибкостью, так что, возможно,
00:11:33
мы могли бы сделать здесь зазор в 1 метр, и я не
00:11:36
знаю, действительно ли я имею в виду этот зазор на этом
00:11:37
потому что посмотрите на эти большие пространства,
00:11:39
которые снова появляются, поведение по умолчанию,
00:11:41
может быть, мы могли бы немного поиграть с этим, чтобы
00:11:42
заставить руку, но
00:11:44
мне все равно это нравится больше, чем это,
00:11:46
и ладно, может быть,
00:11:48
вы скажете нет используйте столбец автоматического потока сетки,
00:11:49
сделайте тот трюк, который вы показали ранее,
00:11:51
где я делал столбцы шаблона сетки с
00:11:54
автоматическим, э-э, автоподбором, а затем там мы делаем
00:11:57
наш минимум-максимум, и давайте просто сделаем нулевую единицу
00:11:59
fr, и вы увидите, что происходит с
00:12:01
нулем один из дней здесь, и
00:12:03
мы вроде как идем, это выглядит немного
00:12:05
лучше, но посмотрите на это, как будто мы
00:12:07
сталкиваемся с проблемой, потому что посмотрите,
00:12:08
все мои столбцы на самом деле
00:12:10
сейчас почти одинакового размера, а потом этот
00:12:12
как будто очень близко, это перенос на две
00:12:14
строки, но посмотрите, как
00:12:16
теперь равны интервалы, потому что размеры
00:12:19
ячеек все одинаковы, но это означает, что
00:12:20
интервал слишком велик, и
00:12:22
это не очень хорошо, и как только он
00:12:24
переносится на это, или мы дошли до нуля может быть,
00:12:25
ноль будет слишком много, давайте попробуем
00:12:27
два или 150 пикселей, может быть, просто чтобы он
00:12:30
обтекал
00:12:31
гм, а потом, когда они начинают обтекать,
00:12:32
здесь еще хуже, потому что
00:12:34
это ужасно, и что
00:12:36
произойдет, если мы снова обернемся так, как
00:12:38
это не так действительно обертываю так, как мне
00:12:40
хотелось бы, на самом деле создается эта
00:12:42
жесткая сетка, которая мне не нужна, тогда
00:12:44
как здесь, если бы я просто сделал гибкую
00:12:46
обертку,
00:12:48
и ничего особо не изменилось, за исключением того, что теперь,
00:12:51
когда я добираюсь до меньшего размера экрана, это
00:12:53
просто оборачивается, и он просто опускается, и
00:12:55
делает то, что мне нужно, и каждый
00:12:57
элемент навигации имеет размер сам по себе, и это
00:12:59
именно то, что я хотел,
00:13:02
используя внутренний размер каждого
00:13:05
элемента, потому что они мне действительно не нужны чтобы
00:13:06
стать большим и громоздким, как будто я вижу, что здесь
00:13:08
происходит, и как
00:13:09
вертикальное расстояние, на этом справа все отключено,
00:13:12
а на этом другом оно просто вроде как
00:13:14
работает, и когда мне заканчивается место,
00:13:16
они сжимаются, и
00:13:18
вот я на самом деле
00:13:20
снова сталкиваюсь с проблемами переполнения, это более
00:13:22
узко, чем вы когда-либо видели, но вы знаете,
00:13:23
что я говорю правильно,
00:13:25
и поэтому
00:13:26
flexbox четко, когда мы хотим, чтобы этот
00:13:28
внутренний размер вещей был просто
00:13:30
замечательным, и у нас просто есть эти элементы,
00:13:32
которые мы хотим идти рядом друг с другом, если
00:13:33
один больше, другой меньше, мы хотим
00:13:35
сохранить эти размеры. Flexbox — это просто
00:13:39
замечательная
00:13:40
сетка, с другой стороны, мы можем использовать
00:13:42
по-разному, и я даже не собираюсь вдаваться в
00:13:44
крупномасштабный макет, потому что часто
00:13:46
для крупномасштабные макеты - это замечательно,
00:13:48
но в одном месте я уже говорил об этом,
00:13:50
так что вы, возможно, слышали, как я
00:13:51
это сказал, но одно место, где сетка действительно
00:13:53
превосходна, - это снова, когда мы хотим
00:13:56
более жесткой системы от родительского элемента,
00:13:58
так что, скажем, мы хотим здесь равные столбцы,
00:14:00
и я собираюсь сделать это сначала с помощью flex,
00:14:02
где вы получаете отображение гибкости на
00:14:04
чем-то, а потом это немного неловко,
00:14:06
мы получаем маленький столбец, маленький столбец,
00:14:08
этот больший столбец, и давайте добавим
00:14:10
туда пробел, просто чтобы это выглядит не
00:14:11
ужасно,
00:14:13
и это работает, гм, но сейчас требуется больше работы,
00:14:15
чтобы перейти к следующему шагу, и снова мы
00:14:17
не можем больше работать над
00:14:19
родительским элементом, чтобы сделать их равными, если я
00:14:21
хочу, чтобы они были равны, мне нужно
00:14:23
затем перейти к детям, поэтому мне нужно перейти к
00:14:24
своим колонкам,
00:14:26
и мне нужно как бы пойти против этого
00:14:27
внутреннего размера, и это
00:14:30
действительно значит, что из-за
00:14:31
внутреннего размера этот больше,
00:14:33
чем эти, потому что этот есть
00:14:35
очень длинный абзац, а в этом
00:14:37
есть более короткие,
00:14:38
и этот внутренний размер действительно
00:14:40
основан на этом большом длинном абзаце,
00:14:42
поэтому, поскольку изначально он хочет быть больше,
00:14:44
даже когда они сжимаются
00:14:46
и уменьшаются, он все равно
00:14:48
будет больше чем эти другие, пока я не
00:14:50
приду сюда, и одно общее решение, которое
00:14:52
вы увидите, — это поставить гибкий вариант и
00:14:54
посмотреть, что теперь мы получаем несколько одинаковых
00:14:55
столбцов, и я имею в виду, что он делает свое
00:14:57
дело правильно, это не ужасное решение,
00:15:00
оно решает наши проблема,
00:15:02
хотя бывают ситуации,
00:15:04
когда это на самом деле может не
00:15:06
решить вашу проблему, если у некоторых из них
00:15:08
есть отступы, а у некоторых нет
00:15:10
таких незначительных расхождений только из-за того,
00:15:11
как работает алгоритм flexbox
00:15:13
и тому подобное, но давайте даже не будем беспокоиться
00:15:15
об этом это просто я нахожу, как здесь,
00:15:17
я делаю, мне нужно перейти к родительскому элементу для
00:15:19
детей, это не так уж и плохо, но это
00:15:21
также очень простое решение, тогда
00:15:24
давайте давайте выключим все это
00:15:26
и посмотрим, если я это сделал
00:15:28
сетку отображения, и мы также сделаем пробел,
00:15:31
а затем мы можем просто сказать, что мне нужно три
00:15:33
столбца, поэтому я просто говорю три столбца, а
00:15:36
затем получаю три столбца, и я говорю, что
00:15:39
они по одному ifr каждый, это иногда может привести к
00:15:42
неравные столбцы,
00:15:44
особенно если
00:15:46
в одном из них есть очень длинное слово, а в другом нет,
00:15:48
так что это не на сто процентов похоже на
00:15:51
матовое идеальное решение,
00:15:53
если вы действительно сделали повторение с мин-
00:15:55
максимумом для них, вы можете получить что-то, что
00:15:56
немного более последовательно, но в
00:15:58
большинстве случаев вы не получите
00:16:00
очень длинное слово или что-то, что
00:16:02
может сбить с толку, поэтому такая простая
00:16:04
вещь,
00:16:05
вероятно, честно сделает свое дело,
00:16:08
и вы просто получите три равных столбца
00:16:10
и что мне нравится, что этим
00:16:12
управляет родительский элемент, я могу добавить туда
00:16:13
любых дочерних элементов, вообще не беспокоясь
00:16:15
об этом, и это действительно
00:16:16
простое решение, и опять же, это почти
00:16:18
одинаковое количество CSS, у нас есть
00:16:20
три свойства здесь, у нас есть три
00:16:22
свойства здесь
00:16:23
и я думаю, немного дольше,
00:16:25
потому что на самом деле вам нужны два селектора
00:16:26
для решения flexbox,
00:16:28
но мне просто нравится, что родительский элемент
00:16:30
действительно контролирует ситуацию и создает
00:16:32
жесткий макет, в который я могу подключить контент
00:16:34
вместо того, чтобы получать поведение от
00:16:37
родитель, а затем должен заставить
00:16:38
детей вести себя так, как я хочу,
00:16:40
и я должен как бы поручить
00:16:42
детям ответственность, тогда как здесь
00:16:44
родитель отвечает за все, что
00:16:45
происходит, поэтому я действительно чувствую, что для
00:16:47
структурированных макетов сетка гораздо лучшее
00:16:50
решение, и в тех случаях, когда мы хотим
00:16:52
полагаться на внутренний размер вещей,
00:16:54
flexbox - гораздо лучшее решение, и независимо от того, есть
00:16:56
ли здесь упаковка или нет, у
00:16:58
нас есть упаковка, которая
00:17:00
происходит, поэтому происходит больше того, что вы думаете, это
00:17:02
2D-макет
00:17:05
снова и снова, из-за
00:17:06
направления гибкости и имеющегося у нас элемента управления
00:17:08
мы видим флексбокс как 1d, тогда как сетка
00:17:11
— это 2d, и где мы можем управлять обоими
00:17:14
измерениями в сетке немного по-
00:17:16
другому,
00:17:17
но вы можете сделать двумерный макет
00:17:19
используя flexbox, вы можете создать
00:17:22
одномерный макет с сеткой, и
00:17:24
прежде чем мы доберемся до конца, я хочу остановиться на одном вопросе: меня
00:17:28
часто спрашивают, можем ли мы смешивать
00:17:31
flexbox, сетку и людей. Кажется, вы
00:17:33
думаете, что вы застряли с одним или
00:17:34
другим, но они так хорошо работают вместе, поэтому
00:17:36
здесь я настроил свою сетку, которая дает мне
00:17:38
три столбца здесь, и внутри каждого
00:17:40
из них у меня есть эти ребята, а это
00:17:42
мои теги, так что если мы просто
00:17:44
быстро взглянем, у меня есть эта
00:17:47
статья о карточках, которая находится прямо здесь и там, у меня
00:17:48
есть множество тегов, и я могу просто сделать для
00:17:51
них гибкий дисплей и гибкую обертку, и
00:17:53
они получат мои маленькие карточки, которые появляются
00:17:55
вот и посмотрите, они работают, и
00:17:56
все
00:17:58
работает просто волшебным образом, потому что я хочу
00:17:59
полагаться на внутренний размер каждого
00:18:02
из тех маленьких тегов, которые я
00:18:03
создал, а затем я хочу больше
00:18:04
структурированного стиля сетки для
00:18:07
самого контента, и я на самом деле вы обнаружите, что с
00:18:10
сеткой легче начать,
00:18:12
даже несмотря на то, что
00:18:14
с ней связано много свойств, они
00:18:16
намного проще, и об
00:18:17
этом гораздо меньше беспокоится, потому что
00:18:19
вы гораздо меньше боретесь с
00:18:21
внутреннее определение размеров вещей и
00:18:23
споры о том, что лежит на родителе, а
00:18:24
что на ребенке, но в любом
00:18:26
случае и где бы вы ни находились на своем
00:18:27
пути обучения, если вы действительно хотите
00:18:29
заняться тем или другим, я недавно
00:18:31
снял видео о самом простом способе получить
00:18:32
начал с сетки и самый простой способ
00:18:34
начать работу с flexbox, и оба
00:18:36
они прямо здесь для вашего
00:18:37
удовольствия от просмотра, и на этом я хочу сказать
00:18:39
большое спасибо моим сторонникам
00:18:40
потрясающего проекта на Patreon, Джонни Джен
00:18:42
Стюарту и Тиму. и всем остальным моим
00:18:44
покровителям за ежемесячную поддержку и,
00:18:46
конечно же, до следующего раза не забудьте
00:18:47
сделать свой интернет еще немного
00:18:49
круче

Описание:

Flexbox and grid are two fantastic layout tools. It can be hard to know which one to pick, but when you focus on the strengths of each one, it becomes a lot easier. 🔗 Links ✅ The easiest way to get started with Grid: https://www.youtube.com/watch?v=rg7Fvvl3taU ✅ The easiest way to get started with Flexbox: https://www.youtube.com/watch?v=u044iM9xsWU ✅ Using the Grid inspector: https://www.youtube.com/watch?v=m04RkJwzFgE ✅ Why I love grid-template-areas: https://www.youtube.com/watch?v=duH4DLq5yoo ⌚ Timestamps 00:00 - Introduction 01:13 - Comparing their behaviors 09:54 - When you should use flexbox 13:40 - When you should use grid 17:23 - Mixing flexbox and grid #css -- Come hang out with other dev's in my Discord Community 💬 https://discord.com/invite/nTYCvrK Keep up to date with everything I'm up to ✉ https://www.kevinpowell.co/newsletter/ Come hang out with me live every Monday on Twitch! 📺 https://www.twitch.tv/kevinpowellcss --- Help support my channel 👨‍🎓 Get a course: https://www.kevinpowell.co/courses/ 👕 Buy a shirt: https://making-the-internet-awesome.creator-spring.com/ 💖 Support me on Patreon: https://www.patreon.com/kevinpowell --- My editor: VS Code - https://code.visualstudio.com/ --- I'm on some other places on the internet too! If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter. Twitter: https://twitter.com/KevinJPowell Codepen: https://codepen.io/kevinpowell/ Github: https://github.com/kevin-powell --- And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Готовим варианты загрузки

popular icon
Популярные
hd icon
HD видео
audio icon
Только звук
total icon
Все форматы
* — Если видео проигрывается в новой вкладке, перейдите в неё, а затем кликните по видео правой кнопкой мыши и выберите пункт "Сохранить видео как..."
** — Ссылка предназначенная для онлайн воспроизведения в специализированных плеерах

Вопросы о скачивании видео

mobile menu iconКак можно скачать видео "Flexbox or grid - How to decide?"?mobile menu icon

  • Сайт http://unidownloader.com/ — лучший способ скачать видео или отдельно аудиодорожку, если хочется обойтись без установки программ и расширений. Расширение UDL Helper — удобная кнопка, которая органично встраивается на сайты YouTube, Instagram и OK.ru для быстрого скачивания контента.

  • Программа UDL Client (для Windows) — самое мощное решение, поддерживающее более 900 сайтов, социальных сетей и видеохостингов, а также любое качество видео, которое доступно в источнике.

  • UDL Lite — представляет собой удобный доступ к сайту с мобильного устройства. С его помощью вы можете легко скачивать видео прямо на смартфон.

mobile menu iconКакой формат видео "Flexbox or grid - How to decide?" выбрать?mobile menu icon

  • Наилучшее качество имеют форматы FullHD (1080p), 2K (1440p), 4K (2160p) и 8K (4320p). Чем больше разрешение вашего экрана, тем выше должно быть качество видео. Однако следует учесть и другие факторы: скорость скачивания, количество свободного места, а также производительность устройства при воспроизведении.

mobile menu iconПочему компьютер зависает при загрузке видео "Flexbox or grid - How to decide?"?mobile menu icon

  • Полностью зависать браузер/компьютер не должен! Если это произошло, просьба сообщить об этом, указав ссылку на видео. Иногда видео нельзя скачать напрямую в подходящем формате, поэтому мы добавили возможность конвертации файла в нужный формат. В отдельных случаях этот процесс может активно использовать ресурсы компьютера.

mobile menu iconКак скачать видео "Flexbox or grid - How to decide?" на телефон?mobile menu icon

  • Вы можете скачать видео на свой смартфон с помощью сайта или pwa-приложения UDL Lite. Также есть возможность отправить ссылку на скачивание через QR-код с помощью расширения UDL Helper.

mobile menu iconКак скачать аудиодорожку (музыку) в MP3 "Flexbox or grid - How to decide?"?mobile menu icon

  • Самый удобный способ — воспользоваться программой UDL Client, которая поддерживает конвертацию видео в формат MP3. В некоторых случаях MP3 можно скачать и через расширение UDL Helper.

mobile menu iconКак сохранить кадр из видео "Flexbox or grid - How to decide?"?mobile menu icon

  • Эта функция доступна в расширении UDL Helper. Убедитесь, что в настройках отмечен пункт «Отображать кнопку сохранения скриншота из видео». В правом нижнем углу плеера левее иконки «Настройки» должна появиться иконка камеры, по нажатию на которую текущий кадр из видео будет сохранён на ваш компьютер в формате JPEG.

mobile menu iconСколько это всё стоит?mobile menu icon

  • Нисколько. Наши сервисы абсолютно бесплатны для всех пользователей. Здесь нет PRO подписок, нет ограничений на количество или максимальную длину скачиваемого видео.