Flexbox CSS #2 - (практика) направление осей и многострочность
Продолжаем уроки по #Flexbox #CSS, тут мы узнаем что такое #Оси и как с ними работать, а также разберем #многострочность и #многоколоночность flex-элементов.
Описание свойств - bit.ly/2CMw9GD
Практический пример - bit.ly/2CAZPn3
Заготовка к уроку - goo.gl/eJTQJJ
Всю теорию закрепляем на практическом примере где сделаем простенькую верстку одной страницы.
В уроке познакомимся со свойством #flex-direction, #flex-wrap.
Реквизиты для поддержки канала:
WMR - R165181087249
WMZ - Z138569415925
PayPal - paypal.me/dwstv
Яндекс - money.yandex.ru/to/4100116101...
Сбербанк - 4276-3000-2291-1211
Во время урока я использую:
Документацию по css и flexbox
Редактор #PhpStorm
*Видео метки*:
[01:11] - Свойство flex-direction
[03:22] - Свойство display
[03:43] - Свойство flex-wrap
[05:49] - Практический пример по flexbox
[07:08] - Каркас и оформление блоков
[20:11] - Адаптируем страницу #media
Обсуждение видео: • Flexbox CSS #2 - (прак...
Подписка на канал: bit.ly/2oR3EfT
Видео сборник: dwstroy.ru/~S126H
FAQ - Ответы на Ваши вопросы: bit.ly/2rHZvR1
Голосование - topic-70729755_35667650
*Другие видео на канале DWSTV*:
JavaScript Основы - bit.ly/2udeTq3
Сайт с нуля - dwstroy.ru/~7KNnM
Уроки по #CSS - dwstroy.ru/~paoBU
1С Битрикс работа с сайтом - dwstroy.ru/~dEG4q
Управление системой Битрикс - dwstroy.ru/~Zdt4K
Настройки сайта 1С Битрикс - dwstroy.ru/~t0UVZ
Добавляйтесь к нам в друзья:
Сайт видео-уроков: dwstroy.ru/video/
Канал в VK автора уроков: dwstv
Пікірлер: 44
=== Полезные ссылки к уроку === ► Шпаргалка по быстрой верстке на EMMET - bit.ly/2zwDk1p ► Шпаргалка по иконкам Font Awesome - bit.ly/2nHR4lt
Спасибо огромное, наконец-то прояснил для себя многие моменты. Уроки просто выше всяких похвал
один из лучших каналов про WEB ))!!
Однозначно лайк за полезную информацию)
Отличный урок!
Спасибо! Очень хорошие уроки, и не пропадай так больше)) Благодаря тебе я научился нормально верстать, Flexbox удобен. Жду следующих уроков, удачи тебе!)
@denisgorelov3236
6 жыл бұрын
На самом деле я не пропадал, просто сделал себе не большой отпуск, праздники все же!!! ))
Здравствуйте. Подача информации замечательная ,буду вас советовать. Надеюсь у вас не гаснет мотивация ,вы стараетесь ,но людей что-то мало интересующихся(возможно конкретно этой тематикой).Спасибо, что делитесь своими навыками.
Спасибо, отличный урок!
Видео просто супер, спасибо вам большое!!!
Спасибо тебе Денис, Абсолютно все четко и досконально объясняешь , а главное все что делаешь) в других видео уроках они ленятся и пропускают))
@denisgorelov3236
6 жыл бұрын
Спасибо.
И снова лайк, лучшее...
Автору БОЛЬШОЕ СПАСИБО за полезный урок, здоровья Вам и удачи, за такие видосы.
@denisgorelov3236
6 жыл бұрын
Спасибо!
Супер уроки!! Легко и доступно для обучения.
В видео есть неточность на 3:20 Значение column не применяется к поперечной оси, свойство flex-direction применяется только в главной оси. Для поперечной align-items, align-self (для отдельно взятого элемента) и align-content для выравнивания всех "шампуров" в контейнере. Спасибо пользователю GaponovaT который на это обратил внимание.
Спасибо, отличное видео! Прояснил для себя несколько вещей связанных со флексами.
Всё классно преподнесено, спасибо. Ждём GRID CSS :)
Я месяц смотрел один канал, где автор всё флоатил, всем дивам пихал вручную размеры и т.д... На свой первый, весьма топорный сайт я потратил неделю и 400 капель валерьянки. Почему этот канал не попался мне на глаза раньше? Спасибо большое и успехов в дальнейшей работе! Лайк, подписка, уважуха!
@denisgorelov3236
6 жыл бұрын
Спасибо! Я бы не рекомендовал полностью отказываться от флоут, есть моменты когда они выручают довольно не плохо.
Братюнь, спасибо тебе огромное. Подписался и на вк и на канал. Поставили мне тут задачу сайт сделать, хотя я инженер, но как ты знаешь - это тыжпрограммист. Прям выручил, показал куда копать)))
круто
Можешь сделать урок по какому-то адаптивному слайдеру на сайт? А так ты вообще молодец, много полезных, интересных и качественно снятых видео на канале)
@denisgorelov3236
6 жыл бұрын
Могу, но пока с временем загвоздка обещать не буде. Спасибо за комментарий.
Привет, Денис! В видео есть неточность на 3.20 Значение column не применяется к поперечной оси, свойство flex-direction применяется только в главной оси. Для поперечной align-items, align-self (для отдельно взятого элемента) и align-content для выравнивания всех "шампуров" в контейнере. Поправь меня, если не так. За урок большое спасибо, материал полезный. Очень доходчиво действуют динамические пояснения :)
@denisgorelov3236
6 жыл бұрын
Да абсолютно верно, спасибо что поправили.
Круто! Спасибо большое за отличный контент))) Разобрался в основных моментах этого флекса, а то по наитию раньше делал и как попало))))теперь более осмысленно. Надеюсь, разберешь все его свойства до конца)))) И еще вопрос: расскажи пожалуйста (или подскажи как правильно задать запрос в гугле) как сделать автообновление браузера как у тебя? то есть, ты пишешь букву в phpstorm и она сразу в браузере отображается) никак не могу найти правильную формулировку длятгугла)))))
@denisgorelov3236
6 жыл бұрын
Тут я описывал как и что использую vk.com/topic-70729755_35330790
@zack11th
6 жыл бұрын
DWS TV - Уроки по WEB разработкам, Спасибо!)
Про шампур у Дмитрия Лаврика слышал
@AndrewMarsin
6 жыл бұрын
Кроме шампура иного примера и не придумать...
@zamid
6 жыл бұрын
А я у сталика ханкишиева
А как это будет работать у плохо видящего пользователя, включившего использование крупных шрифтов? Ведь все размеры в пикселях.
Давай уроки bootstrap 4? Или хоть расскажи отличия bootstrap 4 от bootstrap 3)
@denisgorelov3236
6 жыл бұрын
bootstrap 4 пока в альфе, на боевых проектах не рекомендую пока использовать. Основные его отличия от bootstrap 3, то что поддерживает flexbox, заменили (px) на (em и rem), добавили еще один брейкпоинт (col-xl-) на макс. ширину в 1140 рх. и дополнительно всякие фишки такие как обновили дизайн, появились дополнительные классы как пример container-fluid для резиновой верстки, и немного улучшен функционал, но все равно, сравнивая его с CSS Grid, он ему уступает. Возможно как выйдет в релиз там сделаю обзор, а пока сам пользуюсь третьим.
@ivkis3270
6 жыл бұрын
DWS TV - Уроки по WEB разработкам спасибо большое за ваш ответ :)
Денис, а почему вы писали ul.top-menu, а не .top-menu ul?
@denisgorelov3236
6 жыл бұрын
при таком случае (.top-menu ul) вы отберете все дочерние элементы UL в родителе, а нам нужен сам родитель.
Здравствуйте, а на каком редакторе пишите код? Или пользуетесь несколькими?
@denisgorelov3236
5 жыл бұрын
Каким софтом пользуюсь смотри в группе VK
Какая же муторная адаптация под мобилки в сравнении с css grid
А кто дизлайки ставит?
Много чего не объясняется, короче эти видосы не для новичков