Уроки Flexbox Практика - Верстка галереи адаптивно
HTML-код
- Опубликовано: 24 июн 2017
- Мы продолжаем уроки 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
Создаем интернет магазин на PrestaShop - goo.gl/jop7M4
Уроки jQuery - goo.gl/tjAs41
========================================================
ПОДПИШИСЬ на Группу Вконтакте "Web Developer Blog" - goo.gl/6mO5GL
========================================================
в начале для gallery ты добавляешь в стили свойства:
- flex-wrap: wrap; flex-direction:column;
а в конце добавляешь:
- flex-flow: row wrap.
Что в итоге просто затирает(column) и соотвественно дублирует(wrap) в предыдущих значениях свойств.Так делать нестоит нагромаждая код лишними строками, достаточно было указать flex-flow которое одновременно устанавливает значения этим двум свойтсвам
Тоже заметил, бессмысленное и даже вредное повторение свойств...
тоже прикола не понял. Само по себе flow уже является сокращением этих свойств
Очень понравился урок! Обычно никогда коменты не оставляю - ну а тут не сдержался
2:14 МУЖИИИИК!!!! Спасибо тебе огромное! Я очень многое смогу реализовать с её помощью!
Ув автор или другие, не подскажите почему у меня очень редко все получается так гладко как у автора? Всегда приходится что-то дописывать доделывать ,чтобы получилось так же! По поводу этого видео: все пишу один в один как в видео, но картинки не выстраиваются красиво, они не переносятся а просто уменьшаются пропорционально уменьшению экрана. Расположение 2 2 1 или 3 2 или 4 1 не работает ((( Может ли это быть связано с компом или операционкой?(у меня винда 7 64 браузер Chrome). И это касается именно свойств flex, с остальным все в порядке!
Очень круто! спасибо большое!!!
кстати этот пример меня вдохновил вчера написать по примеру небольшой скрипт типа лайтбокса на нативном js, что в приниципе со мной никогда не случалось, ну а что, все-таки 2 года топчусь на верстке пора начинать писать на js!!)
Это радует, смотрите больше моих видео - больше вдохновляйтесь, учитесь новому и развивайтесь!
Крутяк !)
Верно
@@SuprunAlexey , пожалуйста, обьясните какие ключевые свойства стилей надо устанавливать для адаптивности страницы : width 100% , то что для всех надо писать display: flex я понял , а где надо еще и что надо установить кроме него я не понял ! Может укажите страницу с информацией?
Простые, но очень крутые ховер эффекты
Спасибо за очередной урок! Здорово, что проговариваете вслух каждый шаг, подробность важна :)) Посоветуйте, что дальше смотреть после этого плейлиста ???!!! Вроде как HTML и CSS освоил !!!
Верстка сайта практика. У меня на канале в плейлистах их много
крутая галерея с ховер эфектами!
Размер фото можно как то сделать одного размера? высота стоит авто, если все фото разного размера (как у меня в примере), то смотрится не совсем красиво
hover работает, однако почему при наведении на хэдер и сайдбар полупрозрачность пропадает в галерее??? как это исправить?
как сделать чтобы сайдбар не уезжал вверх когда картинок много и они больше высоты экрана? ставлю position fixed и у меня галерея ниже сайдбара становится.
2:49 font-size: 0, какую роль он здесь играет?
никакую автор в ютубе чтобы выебыватся, не советую учить уроки по этому каналу, он всегда копирует код с каких та сайтов и называют это уроком, у него 30% стилей никакого смысла не имеет только уменьшает читаемость. Задаёт один и тот же цвет текста в каждом блоке, задаёт один и тот же размер текста в каждом блоке отдельно, задаёт фиксированную ширину блоков (в реальности блок занимает столько места сколько занимает контент в блоке, а у автора все фиксированно). Из 100 свойств объясняет только самую элементарную (flex-wrap: объяснил раза 5 минимум), например автор не разу не упомянул: как ведет себе блоки со свойством margin: auto; если блок флексовый, какие свойста подгонятеся при flex: auto, отличия flex-basis от width. Как работают функция calc() и т.д
Автор часто пишут свойств по умолчанию вроде flex-direction: row, align-items: stretch, html {color: #fff;}
Называют классов как угодно и пишет часто глупые вещи, на header задаёт класс header, на nav задаёт класс nav, на footer задаёт класс footer, а классы на блоков задает как не странно просто block-$, в реальности после 300 строк кода из за таких классов начинается путаница и каша варенья, если тебе попадется какой то сайт с таким кодом ты по-просту потеряешься в коде. Это все ошибки который нашёл в этом плейлисте уроков по флексбоксу, если брать в учет что я не профессионал то сколько ошибок совершил он своих уроках и сколько я замечаю (у него ест ещё ошибки который я заметил но не упомянул)?
Мне как раз это и помогло. Долго не мог понять почему у дива с картинкой внизу отступ от картинки. Пробовал паддинги и маржины. Текста, естественно, нигде нет. Даже подумать не мог про font-size. Так что, спасибо парню =)
Как сделать чтобы картинки были не под ссылками, а параллельно ссылкам?
я понимаю что уже не актуально, но для тега main надо было прописать display: flex;
За 8 минут показал больше нужного кода, чем некоторые за три часа. , .