Дмитрий Лаврик | Мастер-класс по вёрстке с помощью flexbox (2015) PCRec

Дмитрий Лаврик | Мастер-класс по вёрстке с помощью flexbox (2015) PCRec

---

Автор (режиссер): Дмитрий Лаврик
Жанр: Вебинар

Описание:
Мастер-класс по вёрстке с помощью FlexBox.
FlexBox - новый способ разбивки контента на блоки, пришедший на смену и/или в помощь стандартным методам вёрстки.

Основные преимущества FlexBox:

• полностью резиновая модель вёрстки
  
• адаптивный сайт без media-запросов
  
• удобные выравнивания элементов по горизонтали и вертикали
  
• изменение порядка HTML-элементов прямо из CSS
  
• с 2014 года поддержка всеми новыми браузерами
  
• простой и лаконичный CSS-код на выходе

Продолжительность: 04:59:29
Качество видео: PCRec

Видео: AVC/H.264, 1280х1024, ~451 Кбит/сек
Аудио: AAC, 2 ch, 158 Кбит/сек Скриншоты:


Время раздачи: С 16:00 до 20:00 по Мск (до появления первых 3-5 скачавших)

derini
Да уж!!!!)))
Я специально скопипастил с той раздачи твой ответ надеясь что ты на него ответишь , а ты просто перевел стрелки на то что maroderwrt пишет с двух аккаунтов!!!! Просто Красава ты)))Ну ты и Шерлок Холмс)))Никогда еще с таким не сталкивался!Ну да бог с тобой юродиевым!

revenant1 писал(а):

Ты и щас будешь говорить что такого не говорил??

revenant1 он же maroderwrt, так как ты един в двух лицах отвечаю тебе по пунктам.

1. Если у тебя нет возможности понимать разницу между ECMA - стандартом символов кода, и ECMA.script - языком программирования, то это не моя а твоя проблема, и рассказывать разницу я не собираюсь.
2. Все что я хотел тебе сказать про JS, я тебе сказал в соответствующей теме, и не стоило с помощью аккаунта-фантома пытаться тащить эту тему еще и сюда, все что я хотел тебе сказать, я уже сказал. И продолжать не буду, потому что это бесполезно, и цирк твой мне давно наскучил.
3. С темы своей петросянской шутки про Flex ты соскочил очень умело, разводить дешевый балаган у тебя получается все лучше и лучше.) Но помогать тебе в этом я уже не собираюсь. Что бы ты, клоун, еще ни написал.

derini писал(а):

revenant1 он же maroderwrt, так как ты един в двух лицах отвечаю тебе по пунктам.

C такой же уверенностью я могу сказать что Max_Alekseyev и derini это тоже одно лицо!
У тебя скорее всего раздвоение личности и эту свою болезнь ты на других переносишь!
Так умело не отвечать за свои слова и придумывать разные небылицы умеешь только ты на этом трекере))

derini писал(а):

Надеюсь, твой вечер был приятным?)

Ну почему же "был"? В процессе
Пока отлучался, смотрю, тут тролли повылазили из нор. По делу ноль, зато количество постов и переходов на личности зашкаливает. Я думал, что у пациента какая-то теория есть, а тут чистое бла-бла-бла. Сказал бы по другому да забанят. Пациент оказался поциентом

maroderwrt писал(а):

C такой же уверенностью я могу сказать что Max_Alekseyev и derini это тоже одно лицо!

Как ты догадался? Раскусил таки

Цитата:

Полный бред ! Флексбоксы не предназначены для построения лейаута, для этого есть гриды! Флексы были введены для горизонтальной верстки!

Цитата:

Флекс , также как и флоат не для лейаута! Вы хоть два джедая про гриды то знаете? Флексы и были введены для верстки отдельных блоков , но очень много даунов которые строят лейауты на них целиком(это очень популярно сейчас)

Мне всегда было интересно, почему большинство людей, которые верстают, вообще и никогда не читали официальную документацию по HTML/CSS? Но зато не устают гомнокодить и писать бред. Что с ними не так?
Если зайти в оф. документацию от разработчиков HTML и CSS и найти там про flex layout:

Цитата:

CSS 2.1 defined four layout modes — algorithms which determine the size and position of boxes based on their relationships with their sibling and ancestor boxes: block layout, designed for laying out documents inline layout, designed for laying out text table layout, designed for laying out 2D data in a tabular format positioned layout, designed for very explicit positioning without much regard for other elements in the document This module introduces a new layout mode, flex layout, which is designed for laying out more complex applications and webpages.

А потом найти и про grid layout, то там можно найти просто фантастические откровения по grid и flex layout для тех, кто в них вообще не разбирается:

Цитата:

Although many layouts can be expressed with either Grid or Flexbox, they each have their specialties. Grid enforces 2-dimensional alignment, uses a top-down approach to layout, allows explicit overlapping of items, and has more powerful spanning capabilities. Flexbox focuses on space distribution within an axis, uses a simpler bottom-up approach to layout, can use a content-size–based line-wrapping system to control its secondary axis, and relies on the underlying markup hierarchy to build more complex layouts. It is expected that both will be valuable and complementary tools for CSS authors.

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

Ссылки на документацию специально не привожу, тренируйте навык гугления, иначе над вами еще много раз будут смеяться.

Кстати, про грид сильно не лестно caniuse отзывается. Поддержка на уровне плинтуса. Тоже полезно туда иногда заглядывать в перерывах между гуглением.

Max_Alekseyev писал(а):

Сказал бы по другому да забанят. Пациент оказался поциентом

Напугал)))У меня же здесь полно твинков на трекере)))И я с сам с собой в каждой раздаче разговариваю))))Так что одним аккаунтом меньше одним больше разницы нет))
utygoed ver0002 тоже мой аккаунт!
Терпеть не могу таких как derini (которые не отвечают за свои слова а переводят тему на какой нибудь бред типа "ты пишешь с двух аккаунтов"), пафоса много , а по делу полный ноль!

да уж, вечер удался)))
Стоило только derini чуть зацепить за его слова как он слюной весь изошелся)))

maroderwrt ты прям как тот , который един в трех лицах)))Может быть аккаунт derini тоже твой??))А что? Сам пишешь , потом сам себя стебешь)))

revenant1 писал(а):

да уж, вечер удался))) maroderwrt ты прям как тот , который един в трех лицах)))Может быть аккаунт derini тоже твой??))А что? Сам пишешь , потом сам себя стебешь)))

А ты обрати внимание, что он первый перевел тему на то что я якобы пишу с двух аккаунтов, а потом обвиняет в том что (только я не понял мне он это предъявляет или тебе) умело соскочил с темы про флексбокс,которую я и не поднимал)))Вот политтехнолог из него неплохой бы получился))

utygoed ver0002, объясни, пожалуйста, для тех кто не владеет английском на должном уровне и не очень понимает то, что автопереводчики на переводят - какова официальная, на основе документации, позиция по применению флексбоксов?

drgood1 писал(а):

utygoed ver0002, объясни, пожалуйста, для тех кто не владеет английском на должном уровне и не очень понимает то, что автопереводчики на переводят - какова официальная, на основе документации, позиция по применению флексбоксов?

Ничё если я с этого аккаунта отвечу? Не охота перезаходить под ником utygoed ver0002))))

drgood1
Могу пояснить почему в нашей компании лейаут не делаем на флексах:
1.Капризные клиенты
2.Громкое слово "кроссбраузерность" откуда это люди берут я не понимаю, что в принципе относится и к гридам, т.к. они только начинают вводится.Флексы не поддерживаются в IE меньше 10 версии вообще в чистом ввиде , без полифилов!
3.Устаревшее ТЗ
4.При горизонтальном позиционировании, что помоему и пытался до вас донести revenant1,флексы не умеют корректно переносить элементы в сеточной раскладке.На флексах это не решается никак!Готов любому приверженцу флексбокс верстки за решение такой задачи заплатить 30к и признать что я полное нубло(без шуток, в отличии от некоторых я отвечаю за свои слова).
5.Флексы не умеют делать Pinterest-раскладку.Не решаемо никак, ну если кто то хочет поспорить насчет этого тоже я уже озвучил выше условия свои!Это решается только абсолютным позиционированием!

Какие задачи решаем на флексах:
1.Вертикальное позиционирование, с их помощью проблема решается одной строчкой
flex-direction:row align content
2.Смена порядков блоков, главная киллер фича флексов!

maroderwrt писал(а):

Громкое слово "кроссбраузерность" откуда это люди берут я не понимаю

Из ТЗ. От написано IE 9+ и хоть кол на голове теши. Хотя я отношусь к этому пункту философски. 9+, так 9+.

maroderwrt писал(а):

2.Смена порядков блоков, главная киллер фича флексов!

Безусловно. Это то, что сразу бросается в глаза и если спросить, чем крут флекс, то это будет один из первых аргументов. Без него какой-нибудь костыль с сортировкой блоков как элементов массива на JS/jQuery пришлось городить бы, например. Вот только ни одной прикладной задачи, где это было бы нужно что-то я не припомню.

maroderwrt писал(а):

Флексы не поддерживаются в IE меньше 10 версии вообще в чистом ввиде , без полифилов!

10-ка там не без косяков поддерживает. По-этому я говорил бы о полноценной поддержке, начиная с IE11. Реально первый полноценный ИЕ, идущий в ногу со временем, но репутация ИЕ так уже подмочена годами, что в его сторону даже смотреть не хочется.

Добавлено спустя 5 часов 44 минуты 36 секунд:

И еще по поводу IE10 + flexbox: совершенно случайно глянул, Modernizr в эмуляции IE10 и ниже рапортует no-flexbox в body.

drgood1 писал(а):

utygoed ver0002, объясни, пожалуйста, для тех кто не владеет английском на должном уровне и не очень понимает то, что автопереводчики на переводят - какова официальная, на основе документации, позиция по применению флексбоксов?

Так совершенствуйтесь, ёлки-палки! А то так и будете Лавриков(хотя это и весьма неплохой пример) слушать, в то время, как в англоязычном интернете вся эта информация была уже 1-3 года назад. Они все вторичны(если не третичны) - в 2017 году рассказывают про препроцессоры и т.д.
P.S. Знать хотя бы на среднем уровне английский должен каждый человек, который считает себя развитым. Особенно это касается IT-сферы (Web-разработка в первую очередь)

kostyshko писал(а):

в то время, как в англоязычном интернете вся эта информация была уже 1-3 года назад.

Так и есть, не раз сталкивался с этим.

kostyshko писал(а):

Особенно это касается IT-сферы (Web-разработка в первую очередь)

Я бы сказал, что в этой сфере это вообще обязательное условие. Устный - черт с ним, но английский технический (тех. переводы всегда были отдельной темой) обязательно. Это документация, ТЗ, переписка и т.д. Я раз садился на долгий проект, меня вообще поставили в тупик, сообщив, что теперь после тех. собеседования будет устный английский. Перебздел слегка, давно не было практики, но ничего, проехал. Английскую спец. школу не пропьёшь
Потом только понял зачем - каждодневные вечерние митинги на английском с второй рабочей группой, которая по-русски понимает только водка, матрёшка и балалайка. Там та еще сборная солянка была с той стороны, только по-английски и возможно.

Max_Alekseyev писал(а):

10-ка там не без косяков поддерживает. .

Десятка хоть понимает что такое флекс, а все что ниже беда и печаль!

Max_Alekseyev писал(а):

Вот только ни одной прикладной задачи, где это было бы нужно что-то я не припомню.

Поработай на проектах больших корпоративных порталов и наберешься такой практики!

Max_Alekseyev писал(а):

но репутация ИЕ так уже подмочена годами, что в его сторону даже смотреть не хочется.

Когда MS понял это, что в вебе пользоваться IE стало дурным тоном и изменить сложившееся мнение об этом браузере никак не изменить, он напросто завязал с этим проектом и начал развивать новый Edge!
Но по моему MS наступает на старые грабли в своем новом проекте, т.к. Edge также как и IE очень медленно вводит новые фичи в модуль рендеринга и модуль JS!Как бы в недалеком будущем и в их новый продукт сопли бы не полетели)))