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

[@mishalitvin6359]

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

[@petproject3419]

Поддерживаю

[@SuprunAlexey]

Спасибо, обязательно это учту

[@wormixstar5055]

используй liveReload пожалуйста

[@oleksus_muchachus]

Изучаю верстку 2 недели и все понятно, все доходчиво. Сначала нужно инфы почитать немножечко, а потом уже практиковаться. А не писать в комментах, что ничего не понятно, я тупой, положите мне в рот, чтобы усвоилось. Автору благодарности!

[@SuprunAlexey]

Спасибо за понимание

[@Elator11777]

спасибо. Рад, что все теоретические уроки в других плэйлистах практикой подкрепляются.

[@SuprunAlexey]

Хотелось бы конечно ко всему практику сделать, буду к этому стремится и делать лучший канал с практическим применением web технологий! Спасибо за Ваш комментарий!

[@termoxin8429]

Интересные уроки, хотел давно нормально с flexbox'ам разобраться. Спасибо большое,буду ждать новых видео.

[@SuprunAlexey]

Спасибо! Ждете значит будут!

[@mrdisel5975]

Есть же уже просьба: Написали свойство - покажите результат, чтоб было удобней усваивать. Визуально отслеживать изменения. Так будет быстрее усваиваться материал. Спс

[@SuprunAlexey]

Хорошо

[@Оро-р6м]

Ура, вторая сетка получилась! Я проверил calc тоже работает. Я заметил у себя ошибки в коде, и сперва не отображалось. По невнимательности. Спасибо большое.

[@Максим-у5ч3р]

Дружища 4 месяца назад я учил уроки у тебя уроки по практике джаваскрипт ,тогда у тебя было ещё около 5 тыс подписчиков ,щас уже захожу почти 10 к ))))Красава ,ростешь ,мои поздравление ,годный контент делаешь ,продалжай в том же тухе и спасибо за уроки

[@SuprunAlexey]

Спасибо Максим. Стараемся. На днях будет 10к, а дальше делаем годный контент и ставим цель 100к подписчиков

[@alexey6794]

У меня не однозначное мнение по поводу этого видео. С одной стороны - плохо, что он не показывает, что происходит на экране после применения написанных стилей. С другой стороны - так работа идет гораздо легче. Я сам верстаю таким образом, держа в голове код и мысленно представляя, о чем речь. Все же, придерживаюсь мнения большинства. WDB в роликах для новичков в самом деле следует после каждого действия показывать результат. Что по поводу видео: не особо-то и познавательное. Скорее, для тех, кто знаком с флекс-бок. Чисто практика и его применение. Видео с разбором флексов на этом же канале гораздо поучительнее и информативнее.

[@АвтокотВеликов]

Если у вас получаются 6 тонких полос, вместо плиточек, попробуйте заменить calc на (25%)

[@petproject3419]

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

[@ЕгорКузминский-щ6у]

Спасибо за урок!

[@tylerua6914]

Нужно больше объяснять, практика практикой, но просто набрать код без объяснений я и так могу. Хотелось бы больше комментариев по коду. Спасибо

[@nekki9321]

повторяю всё в точности, но выходит совсем по другому

[@tmn.123]

без обид. ужасно объясняешь. просто код строчишь. кто только начал разбираться с версткой, ничего не поймёт. ужас простою.

[@АнтонНагорный-р9ж]

В защиту автора, - он объясняет подробно, информация качественная, и БЕСПЛАТНО, так что не пиши пожалуйста такие комменты, я боюсь он перестанет делать уроки.

[@Алексей-в5л1ф]

​@@АнтонНагорный-р9ж он просто показывает код, а не объясняет. все его "объяснения" не лучше, чем в справочнике. "доля от поначалу незанятого пространства флекс-контейнера". Какая доля?какого флекс-контейнера?поначалу это когда?

[@pavelrumyantsev626]

поддерживаю

[@armenakcomp]

Вот это классный контент, спасибо!

[@vadimsib3378]

Реклама каждые две минуты... нааайс, все как я люблю

[@SuprunAlexey]

Редко показывается

[@Кулити-к7ч]

но сейчас уже grid набирает популярность, и по моему мнению он куда удобнее. Жду уроков по PHP, по моему мнению ты хорошо освещаешь сложные темы, а флексбокс довольно прост. С 10к тебя!

[@SuprunAlexey]

Спасибо! Да grid тоже интересная тема, так же про них сделаю видео. Практика PHP следующий курс по плану. Сегодня сделаю видео в честь 10к подписчиков, расскажу планы на канал, что будет)

[@saint-marketolog]

Наконец на ютубе будут нормальные уроки про Flexbox. Жду новых выпусков, надеюсь будет понятно. Можно еще делать упор на адаптивность с помощью Flexbox?

[@SuprunAlexey]

Да, будут и с адаптивностью

[@Kl-hk4lw]

Очень полезно, спасибо, продолжай =)

[@SuprunAlexey]

Да, новые видео каждый день выходят)

[@MityaEr]

зачет за каждодневные видосики)

[@moravery]

Отлично, только я бы посоветовал либо чаще страничку показывать, либо, что ещё лучше, подключить LiveReload, тогда вообще всем будет все понятно и наглядно будет видно как меняется картинка =)

[@SuprunAlexey]

Да, спасибо учту!

[@michaelkovach3894]

Извините, а зачем флекс-элементу, который не содержит никаких блоков, а только цифру 1, задавать значения display:flex, и выравнивать содержимое по осям. CSS строки 14-16?

[@ВасяСидоров-я6ш]

Flex-boxы Это Очень круто))

[@SuprunAlexey]

Согласен полностью

[@azabroflovski]

Спасибо за уроки, успехов вам

[@SuprunAlexey]

Спасибо большое! А вы подписывайтесь!

[@azabroflovski]

Уже давно :)

[@SuprunAlexey]

Это отлично!

[@АхмедХутиев-н4ч]

Web dev blog а зачем задавать максимальную ширину 960px ?

[@АльпПромСамара]

Здравствуйте! Почему здесь в первом примере не работает flex-wrap: wrap; для контейнера??? Если уменьшать размер экрана в хроме, то элементы не переносятся вниз, а тупо их не видно??? И @media screen and (max-width: 600px) { .container { flex-direction: column;} } Вообще не подключается?!

[@mykhailo-ponomarenko]

Подскажите, пожалуйста. Он написал .container и Sulime Text сразу сделал тег с классом container. Какое сочетание клавиш использовать и как это делать?

[@alexandrahumeniuk7560]

.container затем tab (это с любым классом работает, + там сокращают в css (например w100 + tab)

[@sergeykireev1431]

Отличный урок голос приятный но большая просьба показыв в брауз что получается

[@misiraskerov525]

Урок не для новичков. Нихуя не понятно почему все так отображается в браузере. Нужно комментировать и показывать что выдает код после каждой строки.

[@SuprunAlexey]

Урок исключительно для начинающих

[@ЕкатеринаБерезовская-ч9с]

Спасибо)

[@andrewburn1ng]

автор, привет. показались твои уроки интересными, думал освежить знания flexbox, но в самом первом уроке меня что-то очень сильно смущает твой подход к вёрстке. по второй сетке есть вопрос: зачем ты используешь flex-wrap: wrap, и там же используешь calc в ширине элемента? насколько я знаю, calc это вообще bad practice, т.к. каждый раз вызывает пересчёт layout в браузере при изменении viewport'а. хотелось бы услышать твой развёрнутый комментарий. Заранее спасибо за ответ.

[@Оро-р6м]

Я не пробовал, но идеи такие, я думаю тебе нужно создать: во-первых, новые строки, во-вторых, посмотри первый урок по flexbox на этом же канале "Все о flex-box", попробуй разные свойства. Думаю должно сработать. Вопрос актуальный. Я сейчас пока азы учу, но с html и css хорошо знаком.

[@Оро-р6м]

И еще вопрос появился к тебе, что ты подразумеваешь под "иначе"? По фантазии можно многое сделать.

[@Оро-р6м]

Мне кажется, реально. Первое что на ум приходит использовать значение "row" в одном из свойств, забыл как называется.

[@Оро-р6м]

И кстати, сорри, я не все видео еще посмотрел. Увидел твой коммент, решил ответить. Досмотрю, проделаю вторую сетку, может еще идеи появятся.

[@wswebus922]

Урок интересный спасибо. А будет урок по созданию полноценной сеточной системы? Что бы не писать каждый раз display: flex; flex-wrap: wrap; flex: auto .... А написать один раз и потом переиспользовать где надо

[@SuprunAlexey]

Вы имеете ввиду создание собственного фреймворка? чуть преувеличил но вы меня поняли

[@wswebus922]

Да. Может не прям всего фреймворка, а каких-то компонентов, которые можно и нужна написать на флексе. Та же сетка

[@SuprunAlexey]

Пока не планировал, но подумаю над этим

[@ОлегСувернев-х1и]

Конечно лайк за труд. Но мне как новичку хер че понятно

[@СТАВРОПОЛЬСКИЙКОМСОМОЛЛКСМРФ]

помогло только после добавления в right-block { height:430px;}

[@aseaxe9609]

Знаешь что не хватает твоему каналу ? Порядки , у тебя каша полное . Смотришь плейлист ,спустя десяток видеоуроков оказывется что ты должен знать flexbox , смотришь уроки flexbox- оказывается что ты должен знать box-sizing . А чтобы найти где css3 надо найти плейлист ,где только по середине плейлиста начинаются уроки css3. КПЦ раздражает друг мой ,делай с этим что нибудь ,это трэш полное !!! пока не исправишь я буду у "Гоша Дударь"

[@Алексей-в5л1ф]

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

[@VladGoro25]

Почему если задать гроу 0 шринк 1 и бейсис авто то результат будет не такой как при задании флекс:авто ?? в спецификации написано что это одно и то же

[@avikgame3315]

Ничего не понял почему ты не показываешь изменения ? Пожалуйста на будущие показывай изменения на странице так в 10раз лучше усваивается материал!

[@Оро-р6м]

Почему Вы пишете: flex:auto; слитно?

[@yevheniizhoholiev.]

Как называется плагин который помогает так быстро создавать теги ?

[@СултанБакиров-п6ъ]

emmet

[@MrRedouble]

Думаю, что подожду бутстрап новый)

[@SuprunAlexey]

Флексбоксы тоже нужно знать, советую посмотреть курс уроков

[@PacoOfficial]

збс спс

[@SuprunAlexey]

Ты когда то выходишь с ютуба?=)

[@PacoOfficial]

не

[@SuprunAlexey]

Заметно, постоянно вижу твои комменты и под видео других каналов)

[@PacoOfficial]

угу есть такое

[@SuprunAlexey]

Ты работаешь вообще?)

[@webhero42]

Ответь, пожалуйста, у меня стоит 4 элемента в потоке флекс и выравнивание работает, между ними пространство конечно автоматическое, но как только я ставлю марджин справа, все куда то съезжает

[@SuprunAlexey]

Куда съезжает? на новую строку? один элемент?

[@webhero42]

Да! Точно так! Почему?

[@SuprunAlexey]

свойство nowrap и не будет, но размер элементов уменьшится так что бы уместить их все на одной строке)

[@webhero42]

Да, верно; или вообще не применять свойство flex-wrap, тот же эффект, они сжимаются как будто не хватает места, хотя по идее должны влезать по макету. В чем проблема? Использовать какие то свойства flexgrow shrink basis ?

[@webhero42]

Хотя я щас поколдовал и просто убрал все падинги у колонок. Этим бутстрап конечно грешит. Отнимает нужно пространство

[@СТАВРОПОЛЬСКИЙКОМСОМОЛЛКСМРФ]

не убирается отступ у в второго правого блока last-child не работает

[@andrewreidn8062]

margin в блоке grid наверное 40px auto ,а не 0 auto.

[@nhegfr9144]

почему когда указываешь всё едет и сьезжает

[@SuprunAlexey]

Какой браузер?

[@Olga-gb8vz]

"доля от поначалу незанятого пространства флекс-контейнера " ... описание flex-grow, flex-shrink тяжело воспринимаются . может можно проще и понятнее сказать?

[@SuprunAlexey]

Попробуйте на практике разобраться - сразу поймете в чем суть!

[@Алексей-в5л1ф]

@@SuprunAlexey тогда какой смысл видео смотреть?

[@vladkomar9213]

привет, что можешь сказать за css-grid?

[@SuprunAlexey]

У меня есть видео отдельные где я о нем говорю)

[@jaaksiah]

многое не объяснено (в частности, св-во flex) - урок не для начинающих

[@SuprunAlexey]

Так это практика 🤔🤔🤔

[@СергейБеляков-л9х]

Скажите, а зачем Вы пол урока показываете, как умеете набирать текст? Смотрящим интересно поэтапно наблюдать что происходит с сайтом, когда Вы задаёте какие то свойства! Могли бы сразу показать готовую css и не молоть языком. Дизлайк. Однозначно!

[@jonnyel1734]

У тебя видео на скорость, блин никто не успеет писать так быстро, это как идиот: напиши- поставь паузу и так далее. Мы же не книгу читаем, зачем это дрочилово? Сделай нормально!

[@4sat564]

показывай хоть иногда что у тебя выходит когда пишешь, а то понимать трудно. просто ты строчишь код без особых объяснений типа "сами разбирайтесь". ну а так норм.

[@SuprunAlexey]

Хорошо, спасибо, приму к сведению

[@Сергей-щ1й8ж]

В коде много лишнего!!!

[@ИгорьНовгородский-п5р]

почему у меня на всю страницу вылезло все проверял вроде ошибки нет в размере

[@SuprunAlexey]

Где то явно ошибка

[@TheTaeke]

все как на видео, тоже самое

[@melphyorgun4928]

Увы точно такая же проблема. Было бы здорово если бы кто-то выложил свой работающий код.

[@Daryshka-A]

У меня такая же ошибка была. Перепутала и в свойства .container указала width: 100рх; , а надо 100%. Исправила и всё стало на место.

[@assa45547]

совсем не наглядно...

[@SuprunAlexey]

Если не наглядно посмотрите видео где я объясняю свойства kzbin.info/www/bejne/eXW6foZ8ZdN8aKM

[@ShooterStar]

Такой бред конечно... Ни объяснений, ничего...

[@SuprunAlexey]

А ты знаешь что такое флексбокс?

[@fast_easy_tasty4084]

Жаль конечно что ты ничего не объясняешь толком(

[@oleg-on9584]

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

[@SuprunAlexey]

OLEG - ON а что конкретно не понятно?

[@СлаваКравченко-в5р]

@@SuprunAlexey Всё доступно и понятно!!!! Перед изучением Flexbox`а очевидно нужно иметь хоть какую-то базу вёрстки) У кого её нет, те, наверное, и не понимают что-то)))

[@khurik61]

Too much commercial!!! Thumb down

[@SuprunAlexey]

Эх

[@mishachubenko3394]

Спасибо тебе за уроки Человечище !!! Но я вообще не понимаю почему ты приминяешь те или инные флекс свойства. Я уже и конспект прекрасный написал и сверстал около пяти разных заданий !!!

[@Dezxxx2008]

.BlockItem :last-child{ margin-bottom: 0; } не работает

[@ЕвгенийМельник-к6о]

.block-item

[@Dezxxx2008]

Евгений Мельник у меня другой класс мне так удобнее

[@alexey6794]

Между .Blockitem и :last-child пробел