Flexbox CSS #1 - практика выравнивания элементов

[@denisgorelov3236]

=== Полезные ссылки к уроку === ► Шпаргалка по быстрой верстке на EMMET - bit.ly/2zwDk1p ► Шпаргалка по иконкам Font Awesome - bit.ly/2nHR4lt

[@konstantinberejnoy3362]

отличнейшие ролики, доходчиво и без лишней рутины всё показываете! Другие каналы как-то и смотреть перестал.

[@AndrewMarsin]

Один из лучших уроков по флексам, которые я видел.

[@thebestway2159]

Шикарный ролик, жду с нетерпением ещё! Спасибо Вам!

[@inzoddex8312]

Лучшее, что есть на ютубе

[@keepocat]

Господи, как же он все рассказывает и показывает, мне все прям детально понятно, просто обожаю автора

[@sergeysoprunovvv9656]

Охренеть, увидеть такой урок, да еще и с картинкой Пророка из Crysis 3 - это не топ, а топ в квадрате!

[@current1710]

Полезный материал. Автору спасибо!

[@Nifacy55]

Топчииик! Давно ждал этот видос)))

[@swartex92]

Реально всё видео у автора очень хороши и все объясняется доходчиво! Спасибо

[@bodya5645-e5l]

Очень хороший урок!

[@v1kamoon]

Спасибо, все понятно , все получилось! Лайк =*

[@535d3]

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

[@denisgorelov3236]

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

[@Romzec1]

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

[@anastalexa295]

И никто не подсказал, что высоту контейнеру можно задать "height: 100vh;". Классные уроки, отличные задачки для практики, спасибо!

[@denisgorelov3236]

Ага, в точку, век живи век учись, спасибо.

[@kristinabranishevskaya5115]

Спасибо огромное, очень интересные видео, многие вещи наконец стали понятными:)

[@vitka9912]

Шикарно и со вкусом. Большое спасибо!

[@Кирилл-ф5щ2в]

Спасибо большое !! очень познавающий урок

[@d_donskoy862]

Спасибо, огромное как раз то, что было нужно!!

[@Gudvin4]

Спасибо за классные видео!

[@leonidberezin7320]

Отличное видео с классной анимацией картинки , продолжай в том же духе)

[@djaffic9739]

Денис, очень нравятся Ваши уроки. Хотелось бы какой нибудь макет целиком сверстать.

[@denisgorelov3236]

Когда пройдем Flexbox, завершающим уроком сделаем верстку макета.

[@Olegatorius1]

Супер! Очень все понятно!

[@denisgorelov3236]

Спасибо!

[@arltan]

класс

[@Strana-Abissiniya]

Благодарю!

[@diso8850]

Отлично!

[@ОлегЕрмакович-ц1с]

Отлично, Спасибо, хотелось бы посмотреть адаптивное меню бергер на FLEX BOX и т.д.

[@denisgorelov3236]

Возможно как пример в дальнейших уроках по flexbox покажу.

[@mister_robot01]

Отличный канал и отличные уроки! Сделай урок как сверстать макет с fkexbox)

[@denisgorelov3236]

По завершению flexbox, отдельный урок запишу по верстке макета, в нем на практике закрепим все полученные знания.

[@mister_robot01]

Спасибо, ваши уроки многому научили

[@vitaliybay5816]

👍👍👍👍👍

[@СергейПротос-р1р]

спс. по флексам еще хотим материалов...

[@denisgorelov3236]

Будет материал, подождите, всему свое время.

[@СергейПротос-р1р]

спс уважаемый! возможно ли, при случае, рассмотреть css эффекты привязанные к прокрутке? ну там появление элементов при скроллинге например. или это относится к js?

[@violetg603]

Брава класная практика атличныи труд.

[@denisgorelov3236]

Спасибо.

[@sashachubukov176]

Решил проблему с отступом картинки снизу от границы блока с помощью свойства display: block. Это позволило избавится от ее враппера.

[@denisgorelov3236]

Молодец

[@sashachubukov176]

DWS TV - Уроки по WEB разработкам Спасибо), успехов в ведении и развитии канала

[@denisgorelov3236]

Спасибо!

[@zizzxiii2714]

почему-то иконки не добавляются. link к иконкам есть.

[@zizzxiii2714]

все ок. взял link с другого источника и все заработало!

[@artyrdanilov2791]

как вы вставили # одновременно в несколько ссылок ?

[@gamer30plus]

Как в php storm включить синхронизацию (не знаю правильного названия), изменения в редакторе сразу отображаются в браузере Не нашел в интернете)

[@denisgorelov3236]

Нужно поставить дополнительный плагины в браузер и phpstorm тут написано какие - vk.com/topic-70729755_35330790

[@taras9937]

Как сделать автоматическое обновление страницы как у тебя?

[@denisgorelov3236]

Тут описывал что использую - vk.com/topic-70729755_35330790

[@DanilWorm]

Сколько интересно учиться надо чтобы достичь такого же уровня?

[@denisgorelov3236]

Я думаю неделя - две, плюс желание.

[@KoT-ew2dk]

Это скорее практика не по флекс-боксам, а анимации.😃

[@GaponovaT]

Денис, интересно смотреть твои уроки, спасибо! По поводу правого бордера у контейнера, он куда то в итоге теряется, это погрешность видео или таки да, пропадает? Кстати, как вариант, для того чтобы убрать нижний отступ у картинки, можно задать ей display: block и тогда ей не нужен контейнер. Пример в ссылках: clip2net.com/s/3QjRcTP clip2net.com/s/3QjRlmm P.s. Содержимое li-шки не является флекс элементом до тех пор, пока li-шка не станет самостоятельным флекс контейнером.

[@denisgorelov3236]

Спасибо что написал по поводу правого бордера, как то я этот момент упустил из виду. Решается все довольно просто, для списка UL исправь margin-left на -114px и все будет гуд, исходники на сайте перезалил там теперь нормально отображается. По поводу display: block вариант прокатывает до того момента пока картинка не активна, и под ней нет интерактивных элементов по которым тебе нужно сделать клик. Когда задашь display: block, попробуй нажать на иконки в списках LI, будут ли они активны! z-index тут не прокатывает ), в этом и прелесть flexbox. Ответ: li-шки не является флекс элементом, в точку.

[@GaponovaT]

Понятно, спасибо!

[@GaponovaT]

Денис, делюсь результатами моих тестов по уроку. Картинку можно оставить без дива, в этом случае она, будучи флекс элементом, уже блочная и ужимается под контент. Задавать ей display: block уже не нужно. Для того, чтобы был полноценный доступ с интерактивным элементам, задаём ховер не картинке напрямую, а контейнеру, с воздествием на картинку (.image-box:hover img). Всё работает :) Пример в онлайн IDE, жми красную кнопку, чтобы глянуть результат урока css-hover-effect-frontninja.c9users.io/index.html Спасибо!

[@denisgorelov3236]

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

[@GaponovaT]

Спасибо, Денис! Осталась маленькая поправочка - не нашёл, а нашла :) Ждём новых уроков.

[@viktorsamoylov1789]

Привет DWS, я новенький на твоем канале, можешь ответить мне на парочку вопросов? Первый, что такое DWS и зачем ты его пишешь в class и в css. Второй, как запустить HTML5 и CSS3 в программе Notepade++, возможно ли это вообще. Ответь, буду очень благодарен. Я это написал, потому что у меня не получается, сначала я писал свой код, у меня не получалось, потом я начал просто переписывать что пишешь ты видео-уроках, все-ровно ничего.

[@denisgorelov3236]

Привет Viktor, DWS это мая аббревиатура, ей я уникализирую код что бы вы могли его использовать в своих проектах. Notepade++ это просто редактор, мы не запускаем в нем HTML5 и CSS3, в нем только набираем код. Весь код запускается в браузере, набрав его в Notepade++ открываешь index файл в браузере и смотришь как все работает. Попробуй скачать исходники и посмотреть исходные его файлы.

[@maxkrutov39]

Здравствуйте, Денис! Очень понравился Ваш урок! Весьма содержательный и доступно изложен! Подскажите мне пожалуйста как новичку, правильно ли я мыслю и верстаю блок в котором 4 маленьких блока, которые идут друг под дружкой и по 4 углам (к примеру если у меня есть макет с конкретными размерами блоков и именно таким расположением)? Просто хочу до конца разобраться в последовательности применения flex box! Денис, взгляните пожалуйста мой код: (Заранее прошу прощения, что отбираю Ваше время) HTML: Flexbox Block 1 Block 2 Block 3 Block 4 CSS: *{ margin: 0; padding: 0; } html, Body{ height: 100%; } .wrap{ display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; height: 500px; width: 505px; border: 1px solid red; margin: 20px auto; box-sizing: content-box; } .block{ background: #26a082; color: black; font-size: 15px; border: 1px solid #ccc; box-sizing: border-box; } .block2, .block1, .block3, .block4{ flex-basis: 250px; height: 200px; } .block3, .block4{ margin-top: 100px; } .block1, .block3{ margin-right: 5px; } Заранее спасибо Вам за Ваш ответ, Денис!

[@denisgorelov3236]

Можно и так описать, главное суть понимать какую цель преследуете таким макетом.

[@maxkrutov39]

Спасибо Вам, помогли очень!

[@rusg8373]

Спасибо Денис, очень внятно обьесняешь. Респект тебе Бро!!!

[@vladl4464]

Картинка? Да. Я так думаю.

[@Cindorqw]

вау, ни одного диза

[@denisgorelov3236]

В любом случае найдутся те, кому не понравится, главное что лайков больше )

[@F3n0mEn]

Очень хороший урок,всё наглядно видно,спасибо! Есть один вопрос - почему сработал z-index у картинки,ведь она не спозиционирована как reletive,fixed или absolute, а является flex-элементом?

[@denisgorelov3236]

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

[@ПирожокСкартошкой-п6ф]

нет не является

[@Tim12x]

ох и безлайн

[@0x2d26]

Я первый диз, еееееееееееееее

[@denisgorelov3236]

Первым дизлайк может поставить любой, а первым лайк, слабо поставить? )