Тёмный

Уроки Flexbox Практика - Первая сетка 

Web Developer Blog
Подписаться 246 тыс.
Просмотров 63 тыс.
50% 1

Мы начинаем новую серию видеоуроков практики Flexbox. Flexbox это целый модуль и не только одно свойство css3. Flexbox создан для улучшения выравнивания элементов, направления и порядка в контейнере. Практика flexbox это лучший способ понять флексбоксы.
========================================================
ПОДПИШИСЬ на канал "Web Developer Blog" - goo.gl/Ai4OGa
И не пропускай новые видео!!!
========================================================
ПЛЕЙ-ЛИСТЫ МОЕГО КАНАЛА:
JavaScript практика - goo.gl/rxsyeX
Основы JavaScript - goo.gl/Cw7Vqv
Уроки Bootstrap 4 - goo.gl/65gmmS
Уроки Framework для верстки Foundation 6 - goo.gl/Yi2jfc
Рубрика "Основы за 10 минут" - goo.gl/QIvpDD
Верстка сайта на Foundation 6 - goo.gl/gVS45o
Основы препроцессора SASS - goo.gl/f4BDww
Уроки по Sublime text 3 - goo.gl/SjiKM2
Видео про заработок на RU-vid - goo.gl/VxdirI
Создаем интернет магазин на PrestaShop - goo.gl/jop7M4
Уроки jQuery - goo.gl/tjAs41
========================================================
ПОДПИШИСЬ на Группу Вконтакте "Web Developer Blog" - goo.gl/6mO5GL
========================================================

Опубликовано:

 

5 июн 2017

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 122   
@mishalitvin6359
@mishalitvin6359 7 лет назад
Интересный урок. Но есть одна просьба. Пожалуйста, когда пишите код, то иногда показывайте, что выходит после той строки кода.
@petproject3419
@petproject3419 7 лет назад
Поддерживаю
@SuprunAlexey
@SuprunAlexey 7 лет назад
Спасибо, обязательно это учту
@wormixstar5055
@wormixstar5055 7 лет назад
используй liveReload пожалуйста
@Elator11777
@Elator11777 7 лет назад
спасибо. Рад, что все теоретические уроки в других плэйлистах практикой подкрепляются.
@SuprunAlexey
@SuprunAlexey 7 лет назад
Хотелось бы конечно ко всему практику сделать, буду к этому стремится и делать лучший канал с практическим применением web технологий! Спасибо за Ваш комментарий!
@nekki9321
@nekki9321 4 года назад
повторяю всё в точности, но выходит совсем по другому
@termoxin8429
@termoxin8429 7 лет назад
Интересные уроки, хотел давно нормально с flexbox'ам разобраться. Спасибо большое,буду ждать новых видео.
@SuprunAlexey
@SuprunAlexey 7 лет назад
Спасибо! Ждете значит будут!
@armenakcomp
@armenakcomp 3 года назад
Вот это классный контент, спасибо!
@user-co6xp1rj4k
@user-co6xp1rj4k 21 день назад
Спасибо за урок!
@Kl-hk4lw
@Kl-hk4lw 7 лет назад
Очень полезно, спасибо, продолжай =)
@SuprunAlexey
@SuprunAlexey 7 лет назад
Да, новые видео каждый день выходят)
@MityaEr
@MityaEr 6 лет назад
зачет за каждодневные видосики)
@user-rt6ul9fb6u
@user-rt6ul9fb6u 6 лет назад
Ура, вторая сетка получилась! Я проверил calc тоже работает. Я заметил у себя ошибки в коде, и сперва не отображалось. По невнимательности. Спасибо большое.
@oleksus_muchachus
@oleksus_muchachus 4 года назад
Изучаю верстку 2 недели и все понятно, все доходчиво. Сначала нужно инфы почитать немножечко, а потом уже практиковаться. А не писать в комментах, что ничего не понятно, я тупой, положите мне в рот, чтобы усвоилось. Автору благодарности!
@SuprunAlexey
@SuprunAlexey 4 года назад
Спасибо за понимание
@mrdisel5975
@mrdisel5975 6 лет назад
Есть же уже просьба: Написали свойство - покажите результат, чтоб было удобней усваивать. Визуально отслеживать изменения. Так будет быстрее усваиваться материал. Спс
@SuprunAlexey
@SuprunAlexey 6 лет назад
Хорошо
@vadimsib3378
@vadimsib3378 5 лет назад
Реклама каждые две минуты... нааайс, все как я люблю
@SuprunAlexey
@SuprunAlexey 5 лет назад
Редко показывается
@tylerua6914
@tylerua6914 6 лет назад
Нужно больше объяснять, практика практикой, но просто набрать код без объяснений я и так могу. Хотелось бы больше комментариев по коду. Спасибо
@user-xv9br3yj3w
@user-xv9br3yj3w 3 года назад
Если у вас получаются 6 тонких полос, вместо плиточек, попробуйте заменить calc на (25%)
@user-fz7fe8cn7i
@user-fz7fe8cn7i 6 лет назад
Flex-boxы Это Очень круто))
@SuprunAlexey
@SuprunAlexey 6 лет назад
Согласен полностью
@azabroflovski
@azabroflovski 7 лет назад
Спасибо за уроки, успехов вам
@SuprunAlexey
@SuprunAlexey 7 лет назад
Спасибо большое! А вы подписывайтесь!
@azabroflovski
@azabroflovski 7 лет назад
Уже давно :)
@SuprunAlexey
@SuprunAlexey 7 лет назад
Это отлично!
@petproject3419
@petproject3419 7 лет назад
По-моему как раз воды не хватает. Воспринималось бы лучше, если было бы больше жизни. И пока это ничем не отличается от того, если бы вы просто выкинули код и сказали - разбирайтесь. Спасибо за демонстрацию того, что вы умеете списывать. Собственно в чем урок, я так и не понял. Но это просто мнение. Вы молодец! Успехов!
@user-pi6gt2we7k
@user-pi6gt2we7k 7 лет назад
Дружища 4 месяца назад я учил уроки у тебя уроки по практике джаваскрипт ,тогда у тебя было ещё около 5 тыс подписчиков ,щас уже захожу почти 10 к ))))Красава ,ростешь ,мои поздравление ,годный контент делаешь ,продалжай в том же тухе и спасибо за уроки
@SuprunAlexey
@SuprunAlexey 7 лет назад
Спасибо Максим. Стараемся. На днях будет 10к, а дальше делаем годный контент и ставим цель 100к подписчиков
@user-tf2oi3ef1w
@user-tf2oi3ef1w 7 лет назад
но сейчас уже grid набирает популярность, и по моему мнению он куда удобнее. Жду уроков по PHP, по моему мнению ты хорошо освещаешь сложные темы, а флексбокс довольно прост. С 10к тебя!
@SuprunAlexey
@SuprunAlexey 7 лет назад
Спасибо! Да grid тоже интересная тема, так же про них сделаю видео. Практика PHP следующий курс по плану. Сегодня сделаю видео в честь 10к подписчиков, расскажу планы на канал, что будет)
@moravery
@moravery 7 лет назад
Отлично, только я бы посоветовал либо чаще страничку показывать, либо, что ещё лучше, подключить LiveReload, тогда вообще всем будет все понятно и наглядно будет видно как меняется картинка =)
@SuprunAlexey
@SuprunAlexey 7 лет назад
Да, спасибо учту!
@mykhailo-ponomarenko
@mykhailo-ponomarenko 4 года назад
Подскажите, пожалуйста. Он написал .container и Sulime Text сразу сделал тег с классом container. Какое сочетание клавиш использовать и как это делать?
@alexandrahumeniuk7560
@alexandrahumeniuk7560 3 года назад
.container затем tab (это с любым классом работает, + там сокращают в css (например w100 + tab)
@user-xc8ts4fu7j
@user-xc8ts4fu7j 3 года назад
Спасибо)
@alexey6794
@alexey6794 4 года назад
У меня не однозначное мнение по поводу этого видео. С одной стороны - плохо, что он не показывает, что происходит на экране после применения написанных стилей. С другой стороны - так работа идет гораздо легче. Я сам верстаю таким образом, держа в голове код и мысленно представляя, о чем речь. Все же, придерживаюсь мнения большинства. WDB в роликах для новичков в самом деле следует после каждого действия показывать результат. Что по поводу видео: не особо-то и познавательное. Скорее, для тех, кто знаком с флекс-бок. Чисто практика и его применение. Видео с разбором флексов на этом же канале гораздо поучительнее и информативнее.
@saint-marketolog
@saint-marketolog 7 лет назад
Наконец на ютубе будут нормальные уроки про Flexbox. Жду новых выпусков, надеюсь будет понятно. Можно еще делать упор на адаптивность с помощью Flexbox?
@SuprunAlexey
@SuprunAlexey 7 лет назад
Да, будут и с адаптивностью
@sergeykireev1431
@sergeykireev1431 5 лет назад
Отличный урок голос приятный но большая просьба показыв в брауз что получается
@VladGoro25
@VladGoro25 6 лет назад
Почему если задать гроу 0 шринк 1 и бейсис авто то результат будет не такой как при задании флекс:авто ?? в спецификации написано что это одно и то же
@michaelkovach3894
@michaelkovach3894 5 лет назад
Извините, а зачем флекс-элементу, который не содержит никаких блоков, а только цифру 1, задавать значения display:flex, и выравнивать содержимое по осям. CSS строки 14-16?
@user-mi8bx2zl1f
@user-mi8bx2zl1f 2 года назад
Здравствуйте! Почему здесь в первом примере не работает flex-wrap: wrap; для контейнера??? Если уменьшать размер экрана в хроме, то элементы не переносятся вниз, а тупо их не видно??? И @media screen and (max-width: 600px) { .container { flex-direction: column;} } Вообще не подключается?!
@user-fs9th3sr9g
@user-fs9th3sr9g 3 года назад
Web dev blog а зачем задавать максимальную ширину 960px ?
@user-lr1zs3vd5r
@user-lr1zs3vd5r 5 лет назад
помогло только после добавления в right-block { height:430px;}
@tmn.123
@tmn.123 6 лет назад
без обид. ужасно объясняешь. просто код строчишь. кто только начал разбираться с версткой, ничего не поймёт. ужас простою.
@user-ls3dl4om7i
@user-ls3dl4om7i 5 лет назад
В защиту автора, - он объясняет подробно, информация качественная, и БЕСПЛАТНО, так что не пиши пожалуйста такие комменты, я боюсь он перестанет делать уроки.
@user-me7ro9qf5f
@user-me7ro9qf5f 4 года назад
​@@user-ls3dl4om7i он просто показывает код, а не объясняет. все его "объяснения" не лучше, чем в справочнике. "доля от поначалу незанятого пространства флекс-контейнера". Какая доля?какого флекс-контейнера?поначалу это когда?
@pavelrumyantsev626
@pavelrumyantsev626 3 года назад
поддерживаю
@MrRedouble
@MrRedouble 7 лет назад
Думаю, что подожду бутстрап новый)
@SuprunAlexey
@SuprunAlexey 7 лет назад
Флексбоксы тоже нужно знать, советую посмотреть курс уроков
@user-rt6ul9fb6u
@user-rt6ul9fb6u 6 лет назад
Почему Вы пишете: flex:auto; слитно?
@andrewburn1ng
@andrewburn1ng 7 лет назад
автор, привет. показались твои уроки интересными, думал освежить знания flexbox, но в самом первом уроке меня что-то очень сильно смущает твой подход к вёрстке. по второй сетке есть вопрос: зачем ты используешь flex-wrap: wrap, и там же используешь calc в ширине элемента? насколько я знаю, calc это вообще bad practice, т.к. каждый раз вызывает пересчёт layout в браузере при изменении viewport'а. хотелось бы услышать твой развёрнутый комментарий. Заранее спасибо за ответ.
@user-rt6ul9fb6u
@user-rt6ul9fb6u 6 лет назад
Я не пробовал, но идеи такие, я думаю тебе нужно создать: во-первых, новые строки, во-вторых, посмотри первый урок по flexbox на этом же канале "Все о flex-box", попробуй разные свойства. Думаю должно сработать. Вопрос актуальный. Я сейчас пока азы учу, но с html и css хорошо знаком.
@user-rt6ul9fb6u
@user-rt6ul9fb6u 6 лет назад
И еще вопрос появился к тебе, что ты подразумеваешь под "иначе"? По фантазии можно многое сделать.
@user-rt6ul9fb6u
@user-rt6ul9fb6u 6 лет назад
Мне кажется, реально. Первое что на ум приходит использовать значение "row" в одном из свойств, забыл как называется.
@user-rt6ul9fb6u
@user-rt6ul9fb6u 6 лет назад
И кстати, сорри, я не все видео еще посмотрел. Увидел твой коммент, решил ответить. Досмотрю, проделаю вторую сетку, может еще идеи появятся.
@vladkomar9213
@vladkomar9213 6 лет назад
привет, что можешь сказать за css-grid?
@SuprunAlexey
@SuprunAlexey 6 лет назад
У меня есть видео отдельные где я о нем говорю)
@user-yn7yx9kp4x
@user-yn7yx9kp4x 3 года назад
Конечно лайк за труд. Но мне как новичку хер че понятно
@user-lr1zs3vd5r
@user-lr1zs3vd5r 5 лет назад
не убирается отступ у в второго правого блока last-child не работает
@misiraskerov525
@misiraskerov525 5 лет назад
Урок не для новичков. Нихуя не понятно почему все так отображается в браузере. Нужно комментировать и показывать что выдает код после каждой строки.
@SuprunAlexey
@SuprunAlexey 5 лет назад
Урок исключительно для начинающих
@andrewreidn8062
@andrewreidn8062 6 лет назад
margin в блоке grid наверное 40px auto ,а не 0 auto.
@yevheniizhoholiev.
@yevheniizhoholiev. 3 года назад
Как называется плагин который помогает так быстро создавать теги ?
@user-ec2qm4uw6n
@user-ec2qm4uw6n 3 года назад
emmet
@PacoOfficial
@PacoOfficial 7 лет назад
збс спс
@SuprunAlexey
@SuprunAlexey 7 лет назад
Ты когда то выходишь с ютуба?=)
@PacoOfficial
@PacoOfficial 7 лет назад
не
@SuprunAlexey
@SuprunAlexey 7 лет назад
Заметно, постоянно вижу твои комменты и под видео других каналов)
@PacoOfficial
@PacoOfficial 7 лет назад
угу есть такое
@SuprunAlexey
@SuprunAlexey 7 лет назад
Ты работаешь вообще?)
@wswebus922
@wswebus922 7 лет назад
Урок интересный спасибо. А будет урок по созданию полноценной сеточной системы? Что бы не писать каждый раз display: flex; flex-wrap: wrap; flex: auto .... А написать один раз и потом переиспользовать где надо
@SuprunAlexey
@SuprunAlexey 7 лет назад
Вы имеете ввиду создание собственного фреймворка? чуть преувеличил но вы меня поняли
@wswebus922
@wswebus922 7 лет назад
Да. Может не прям всего фреймворка, а каких-то компонентов, которые можно и нужна написать на флексе. Та же сетка
@SuprunAlexey
@SuprunAlexey 7 лет назад
Пока не планировал, но подумаю над этим
@nhegfr9144
@nhegfr9144 6 лет назад
почему когда указываешь всё едет и сьезжает
@SuprunAlexey
@SuprunAlexey 6 лет назад
Какой браузер?
@webhero42
@webhero42 7 лет назад
Ответь, пожалуйста, у меня стоит 4 элемента в потоке флекс и выравнивание работает, между ними пространство конечно автоматическое, но как только я ставлю марджин справа, все куда то съезжает
@SuprunAlexey
@SuprunAlexey 7 лет назад
Куда съезжает? на новую строку? один элемент?
@webhero42
@webhero42 7 лет назад
Да! Точно так! Почему?
@SuprunAlexey
@SuprunAlexey 7 лет назад
свойство nowrap и не будет, но размер элементов уменьшится так что бы уместить их все на одной строке)
@webhero42
@webhero42 7 лет назад
Да, верно; или вообще не применять свойство flex-wrap, тот же эффект, они сжимаются как будто не хватает места, хотя по идее должны влезать по макету. В чем проблема? Использовать какие то свойства flexgrow shrink basis ?
@webhero42
@webhero42 7 лет назад
Хотя я щас поколдовал и просто убрал все падинги у колонок. Этим бутстрап конечно грешит. Отнимает нужно пространство
@user-eb7lr9mo2o
@user-eb7lr9mo2o 7 лет назад
почему у меня на всю страницу вылезло все проверял вроде ошибки нет в размере
@SuprunAlexey
@SuprunAlexey 7 лет назад
Где то явно ошибка
@TheTaeke
@TheTaeke 6 лет назад
все как на видео, тоже самое
@melphyorgun4928
@melphyorgun4928 6 лет назад
Увы точно такая же проблема. Было бы здорово если бы кто-то выложил свой работающий код.
@Daryshka-A
@Daryshka-A 6 лет назад
У меня такая же ошибка была. Перепутала и в свойства .container указала width: 100рх; , а надо 100%. Исправила и всё стало на место.
@avikgame3315
@avikgame3315 4 года назад
Ничего не понял почему ты не показываешь изменения ? Пожалуйста на будущие показывай изменения на странице так в 10раз лучше усваивается материал!
@Olga-gb8vz
@Olga-gb8vz 7 лет назад
"доля от поначалу незанятого пространства флекс-контейнера " ... описание flex-grow, flex-shrink тяжело воспринимаются . может можно проще и понятнее сказать?
@SuprunAlexey
@SuprunAlexey 7 лет назад
Попробуйте на практике разобраться - сразу поймете в чем суть!
@user-me7ro9qf5f
@user-me7ro9qf5f 4 года назад
@@SuprunAlexey тогда какой смысл видео смотреть?
@Dezxxx2008
@Dezxxx2008 6 лет назад
.BlockItem :last-child{ margin-bottom: 0; } не работает
@user-zp9uw9yf3p
@user-zp9uw9yf3p 6 лет назад
.block-item
@Dezxxx2008
@Dezxxx2008 6 лет назад
Евгений Мельник у меня другой класс мне так удобнее
@alexey6794
@alexey6794 4 года назад
Между .Blockitem и :last-child пробел
@user-me7ro9qf5f
@user-me7ro9qf5f 4 года назад
согласен со многими, ставлю дизлайк за отсутствие какой либо инфы. просто выложили бы картинки и код, и все, было бы тоже самое. чтоб передать эту информацию, видео не обязательно записывать
@4sat564
@4sat564 7 лет назад
показывай хоть иногда что у тебя выходит когда пишешь, а то понимать трудно. просто ты строчишь код без особых объяснений типа "сами разбирайтесь". ну а так норм.
@SuprunAlexey
@SuprunAlexey 7 лет назад
Хорошо, спасибо, приму к сведению
@user-dx7yi5tf8m
@user-dx7yi5tf8m 6 лет назад
В коде много лишнего!!!
@Sleep_to_music
@Sleep_to_music 7 дней назад
как же вы достали со своими видосами: в доках написано - d-flex - flex-КОНТЕЙНЕР, почему flex-вёрстка начинается c container? вот вам начало как дальше на flex верстать?
@aseaxe9609
@aseaxe9609 5 лет назад
Знаешь что не хватает твоему каналу ? Порядки , у тебя каша полное . Смотришь плейлист ,спустя десяток видеоуроков оказывется что ты должен знать flexbox , смотришь уроки flexbox- оказывается что ты должен знать box-sizing . А чтобы найти где css3 надо найти плейлист ,где только по середине плейлиста начинаются уроки css3. КПЦ раздражает друг мой ,делай с этим что нибудь ,это трэш полное !!! пока не исправишь я буду у "Гоша Дударь"
@jaaksiah
@jaaksiah 3 года назад
многое не объяснено (в частности, св-во flex) - урок не для начинающих
@SuprunAlexey
@SuprunAlexey 3 года назад
Так это практика 🤔🤔🤔
@assa45547
@assa45547 7 лет назад
совсем не наглядно...
@SuprunAlexey
@SuprunAlexey 7 лет назад
Если не наглядно посмотрите видео где я объясняю свойства ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-CDWMSF0nI2A.html
@fast_easy_tasty4084
@fast_easy_tasty4084 4 года назад
Жаль конечно что ты ничего не объясняешь толком(
@user-qf5yf1vg6e
@user-qf5yf1vg6e 6 лет назад
Скажите, а зачем Вы пол урока показываете, как умеете набирать текст? Смотрящим интересно поэтапно наблюдать что происходит с сайтом, когда Вы задаёте какие то свойства! Могли бы сразу показать готовую css и не молоть языком. Дизлайк. Однозначно!
@jonnyel1734
@jonnyel1734 5 лет назад
У тебя видео на скорость, блин никто не успеет писать так быстро, это как идиот: напиши- поставь паузу и так далее. Мы же не книгу читаем, зачем это дрочилово? Сделай нормально!
@khurik61
@khurik61 6 лет назад
Too much commercial!!! Thumb down
@SuprunAlexey
@SuprunAlexey 6 лет назад
Эх
@ShooterStar
@ShooterStar 5 лет назад
Такой бред конечно... Ни объяснений, ничего...
@SuprunAlexey
@SuprunAlexey 5 лет назад
А ты знаешь что такое флексбокс?
@oleg-on9584
@oleg-on9584 4 года назад
очень плохо,ничего не понятно! тебе нужно не демонстрировать свои навыки а научить!
@SuprunAlexey
@SuprunAlexey 4 года назад
OLEG - ON а что конкретно не понятно?
@user-er6ce4il7o
@user-er6ce4il7o 3 года назад
@@SuprunAlexey Всё доступно и понятно!!!! Перед изучением Flexbox`а очевидно нужно иметь хоть какую-то базу вёрстки) У кого её нет, те, наверное, и не понимают что-то)))
@mishachubenko3394
@mishachubenko3394 Год назад
Спасибо тебе за уроки Человечище !!! Но я вообще не понимаю почему ты приминяешь те или инные флекс свойства. Я уже и конспект прекрасный написал и сверстал около пяти разных заданий !!!
Далее
Learn Flexbox in 15 Minutes
15:12
Просмотров 1,1 млн
Learn Flexbox CSS in 8 minutes
8:16
Просмотров 1,4 млн