Уроки Flexbox Практика - Первая сетка
HTML-код
- Опубликовано: 5 июн 2017
- Мы начинаем новую серию видеоуроков практики 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
Видео про заработок на RUclips - goo.gl/VxdirI
Создаем интернет магазин на PrestaShop - goo.gl/jop7M4
Уроки jQuery - goo.gl/tjAs41
========================================================
ПОДПИШИСЬ на Группу Вконтакте "Web Developer Blog" - goo.gl/6mO5GL
========================================================
Интересный урок. Но есть одна просьба. Пожалуйста, когда пишите код, то иногда показывайте, что выходит после той строки кода.
Поддерживаю
Спасибо, обязательно это учту
используй liveReload пожалуйста
повторяю всё в точности, но выходит совсем по другому
У меня не однозначное мнение по поводу этого видео. С одной стороны - плохо, что он не показывает, что происходит на экране после применения написанных стилей. С другой стороны - так работа идет гораздо легче. Я сам верстаю таким образом, держа в голове код и мысленно представляя, о чем речь. Все же, придерживаюсь мнения большинства. WDB в роликах для новичков в самом деле следует после каждого действия показывать результат. Что по поводу видео: не особо-то и познавательное. Скорее, для тех, кто знаком с флекс-бок. Чисто практика и его применение. Видео с разбором флексов на этом же канале гораздо поучительнее и информативнее.
Есть же уже просьба: Написали свойство - покажите результат, чтоб было удобней усваивать.
Визуально отслеживать изменения.
Так будет быстрее усваиваться материал.
Спс
Хорошо
По-моему как раз воды не хватает. Воспринималось бы лучше, если было бы больше жизни.
И пока это ничем не отличается от того, если бы вы просто выкинули код и сказали - разбирайтесь.
Спасибо за демонстрацию того, что вы умеете списывать. Собственно в чем урок, я так и не понял.
Но это просто мнение. Вы молодец! Успехов!
Изучаю верстку 2 недели и все понятно, все доходчиво. Сначала нужно инфы почитать немножечко, а потом уже практиковаться. А не писать в комментах, что ничего не понятно, я тупой, положите мне в рот, чтобы усвоилось.
Автору благодарности!
Спасибо за понимание
Нужно больше объяснять, практика практикой, но просто набрать код без объяснений я и так могу. Хотелось бы больше комментариев по коду. Спасибо
Если у вас получаются 6 тонких полос, вместо плиточек, попробуйте заменить calc на (25%)
Вот это классный контент, спасибо!
Извините, а зачем флекс-элементу, который не содержит никаких блоков, а только цифру 1, задавать значения display:flex, и выравнивать содержимое по осям. CSS строки 14-16?
спасибо. Рад, что все теоретические уроки в других плэйлистах практикой подкрепляются.
Хотелось бы конечно ко всему практику сделать, буду к этому стремится и делать лучший канал с практическим применением web технологий! Спасибо за Ваш комментарий!
Ура, вторая сетка получилась! Я проверил calc тоже работает. Я заметил у себя ошибки в коде, и сперва не отображалось. По невнимательности. Спасибо большое.
Интересные уроки, хотел давно нормально с flexbox'ам разобраться. Спасибо большое,буду ждать новых видео.
Спасибо! Ждете значит будут!
Очень полезно, спасибо, продолжай =)
Да, новые видео каждый день выходят)
зачет за каждодневные видосики)
Web dev blog а зачем задавать максимальную ширину 960px ?
Почему если задать гроу 0 шринк 1 и бейсис авто то результат будет не такой как при задании флекс:авто ?? в спецификации написано что это одно и то же
Спасибо)
Здравствуйте! Почему здесь в первом примере не работает flex-wrap: wrap; для контейнера???
Если уменьшать размер экрана в хроме, то элементы не переносятся вниз, а тупо их не видно??? И @media screen and (max-width: 600px) {
.container {
flex-direction: column;}
} Вообще не подключается?!
Отлично, только я бы посоветовал либо чаще страничку показывать, либо, что ещё лучше, подключить LiveReload, тогда вообще всем будет все понятно и наглядно будет видно как меняется картинка =)
Да, спасибо учту!
Реклама каждые две минуты... нааайс, все как я люблю
Редко показывается
Дружища 4 месяца назад я учил уроки у тебя уроки по практике джаваскрипт ,тогда у тебя было ещё около 5 тыс подписчиков ,щас уже захожу почти 10 к ))))Красава ,ростешь ,мои поздравление ,годный контент делаешь ,продалжай в том же тухе и спасибо за уроки
Спасибо Максим. Стараемся. На днях будет 10к, а дальше делаем годный контент и ставим цель 100к подписчиков
Flex-boxы Это Очень круто))
Согласен полностью
Спасибо за уроки, успехов вам
Спасибо большое! А вы подписывайтесь!
Уже давно :)
Это отлично!
Подскажите, пожалуйста. Он написал .container и Sulime Text сразу сделал тег с классом container. Какое сочетание клавиш использовать и как это делать?
.container затем tab (это с любым классом работает, + там сокращают в css (например w100 + tab)
но сейчас уже grid набирает популярность, и по моему мнению он куда удобнее. Жду уроков по PHP, по моему мнению ты хорошо освещаешь сложные темы, а флексбокс довольно прост. С 10к тебя!
Спасибо! Да grid тоже интересная тема, так же про них сделаю видео. Практика PHP следующий курс по плану. Сегодня сделаю видео в честь 10к подписчиков, расскажу планы на канал, что будет)
Отличный урок голос приятный но большая просьба показыв в брауз что получается
Урок не для новичков. Нихуя не понятно почему все так отображается в браузере. Нужно комментировать и показывать что выдает код после каждой строки.
Урок исключительно для начинающих
Почему Вы пишете: flex:auto; слитно?
Наконец на ютубе будут нормальные уроки про Flexbox. Жду новых выпусков, надеюсь будет понятно. Можно еще делать упор на адаптивность с помощью Flexbox?
Да, будут и с адаптивностью
помогло только после добавления в right-block {
height:430px;}
не убирается отступ у в второго правого блока last-child не работает
без обид. ужасно объясняешь. просто код строчишь. кто только начал разбираться с версткой, ничего не поймёт. ужас простою.
В защиту автора, - он объясняет подробно, информация качественная, и БЕСПЛАТНО, так что не пиши пожалуйста такие комменты, я боюсь он перестанет делать уроки.
@@user-ls3dl4om7i он просто показывает код, а не объясняет. все его "объяснения" не лучше, чем в справочнике. "доля от поначалу незанятого пространства флекс-контейнера". Какая доля?какого флекс-контейнера?поначалу это когда?
поддерживаю
привет, что можешь сказать за css-grid?
У меня есть видео отдельные где я о нем говорю)
автор, привет. показались твои уроки интересными, думал освежить знания flexbox, но в самом первом уроке меня что-то очень сильно смущает твой подход к вёрстке. по второй сетке есть вопрос: зачем ты используешь flex-wrap: wrap, и там же используешь calc в ширине элемента? насколько я знаю, calc это вообще bad practice, т.к. каждый раз вызывает пересчёт layout в браузере при изменении viewport'а. хотелось бы услышать твой развёрнутый комментарий. Заранее спасибо за ответ.
Я не пробовал, но идеи такие, я думаю тебе нужно создать: во-первых, новые строки, во-вторых, посмотри первый урок по flexbox на этом же канале "Все о flex-box", попробуй разные свойства. Думаю должно сработать. Вопрос актуальный. Я сейчас пока азы учу, но с html и css хорошо знаком.
И еще вопрос появился к тебе, что ты подразумеваешь под "иначе"? По фантазии можно многое сделать.
Мне кажется, реально. Первое что на ум приходит использовать значение "row" в одном из свойств, забыл как называется.
И кстати, сорри, я не все видео еще посмотрел. Увидел твой коммент, решил ответить. Досмотрю, проделаю вторую сетку, может еще идеи появятся.
margin в блоке grid наверное 40px auto ,а не 0 auto.
Думаю, что подожду бутстрап новый)
Флексбоксы тоже нужно знать, советую посмотреть курс уроков
Как называется плагин который помогает так быстро создавать теги ?
emmet
Конечно лайк за труд. Но мне как новичку хер че понятно
Ничего не понял почему ты не показываешь изменения ?
Пожалуйста на будущие показывай изменения на странице так в 10раз лучше усваивается материал!
збс спс
Ты когда то выходишь с ютуба?=)
не
Заметно, постоянно вижу твои комменты и под видео других каналов)
угу есть такое
Ты работаешь вообще?)
почему когда указываешь всё едет и сьезжает
Какой браузер?
Урок интересный спасибо.
А будет урок по созданию полноценной сеточной системы? Что бы не писать каждый раз
display: flex;
flex-wrap: wrap;
flex: auto
....
А написать один раз и потом переиспользовать где надо
Вы имеете ввиду создание собственного фреймворка? чуть преувеличил но вы меня поняли
Да. Может не прям всего фреймворка, а каких-то компонентов, которые можно и нужна написать на флексе. Та же сетка
Пока не планировал, но подумаю над этим
согласен со многими, ставлю дизлайк за отсутствие какой либо инфы. просто выложили бы картинки и код, и все, было бы тоже самое. чтоб передать эту информацию, видео не обязательно записывать
Ответь, пожалуйста, у меня стоит 4 элемента в потоке флекс и выравнивание работает, между ними пространство конечно автоматическое, но как только я ставлю марджин справа, все куда то съезжает
Куда съезжает? на новую строку? один элемент?
Да! Точно так! Почему?
свойство nowrap и не будет, но размер элементов уменьшится так что бы уместить их все на одной строке)
Да, верно; или вообще не применять свойство flex-wrap, тот же эффект, они сжимаются как будто не хватает места, хотя по идее должны влезать по макету. В чем проблема? Использовать какие то свойства flexgrow shrink basis ?
Хотя я щас поколдовал и просто убрал все падинги у колонок. Этим бутстрап конечно грешит. Отнимает нужно пространство
"доля от поначалу незанятого пространства флекс-контейнера " ... описание flex-grow, flex-shrink тяжело воспринимаются . может можно проще и понятнее сказать?
Попробуйте на практике разобраться - сразу поймете в чем суть!
@@SuprunAlexey тогда какой смысл видео смотреть?
Частей уже 9 а в плейлисте только 3 (1 8 и 9) вай?
Уже и сам заметил, там просто два плейлиста "практика flexbox" и "уроки flexbox" и все видео в уроках)
В коде много лишнего!!!
почему у меня на всю страницу вылезло все проверял вроде ошибки нет в размере
Где то явно ошибка
все как на видео, тоже самое
Увы точно такая же проблема. Было бы здорово если бы кто-то выложил свой работающий код.
У меня такая же ошибка была. Перепутала и в свойства .container указала width: 100рх; , а надо 100%. Исправила и всё стало на место.
Знаешь что не хватает твоему каналу ? Порядки , у тебя каша полное . Смотришь плейлист ,спустя десяток видеоуроков оказывется что ты должен знать flexbox , смотришь уроки flexbox- оказывается что ты должен знать box-sizing . А чтобы найти где css3 надо найти плейлист ,где только по середине плейлиста начинаются уроки css3.
КПЦ раздражает друг мой ,делай с этим что нибудь ,это трэш полное !!!
пока не исправишь я буду у "Гоша Дударь"
.BlockItem :last-child{
margin-bottom: 0;
}
не работает
.block-item
Евгений Мельник у меня другой класс мне так удобнее
Между .Blockitem и :last-child пробел
совсем не наглядно...
Если не наглядно посмотрите видео где я объясняю свойства ruclips.net/video/CDWMSF0nI2A/видео.html
многое не объяснено (в частности, св-во flex) - урок не для начинающих
Так это практика 🤔🤔🤔
показывай хоть иногда что у тебя выходит когда пишешь, а то понимать трудно. просто ты строчишь код без особых объяснений типа "сами разбирайтесь". ну а так норм.
Хорошо, спасибо, приму к сведению
Жаль конечно что ты ничего не объясняешь толком(
Такой бред конечно... Ни объяснений, ничего...
А ты знаешь что такое флексбокс?
У тебя видео на скорость, блин никто не успеет писать так быстро, это как идиот: напиши- поставь паузу и так далее. Мы же не книгу читаем, зачем это дрочилово? Сделай нормально!
Too much commercial!!! Thumb down
Эх
Скажите, а зачем Вы пол урока показываете, как умеете набирать текст? Смотрящим интересно поэтапно наблюдать что происходит с сайтом, когда Вы задаёте какие то свойства! Могли бы сразу показать готовую css и не молоть языком. Дизлайк. Однозначно!
очень плохо,ничего не понятно! тебе нужно не демонстрировать свои навыки а научить!
OLEG - ON а что конкретно не понятно?
@@SuprunAlexey Всё доступно и понятно!!!! Перед изучением Flexbox`а очевидно нужно иметь хоть какую-то базу вёрстки) У кого её нет, те, наверное, и не понимают что-то)))
Спасибо тебе за уроки Человечище !!! Но я вообще не понимаю почему ты приминяешь те или инные флекс свойства. Я уже и конспект прекрасный написал и сверстал около пяти разных заданий !!!