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

  • @denisgorelov3236
    @denisgorelov32366 жыл бұрын

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

  • @bektendosmambetov938
    @bektendosmambetov9384 жыл бұрын

    Спасибо огромное, наконец-то прояснил для себя многие моменты. Уроки просто выше всяких похвал

  • @frontend2225
    @frontend22256 жыл бұрын

    один из лучших каналов про WEB ))!!

  • @SpAaTeam
    @SpAaTeam6 жыл бұрын

    Однозначно лайк за полезную информацию)

  • @user-dl1ii9tp4u
    @user-dl1ii9tp4u4 жыл бұрын

    Отличный урок!

  • @mister_robot01
    @mister_robot016 жыл бұрын

    Спасибо! Очень хорошие уроки, и не пропадай так больше)) Благодаря тебе я научился нормально верстать, Flexbox удобен. Жду следующих уроков, удачи тебе!)

  • @denisgorelov3236

    @denisgorelov3236

    6 жыл бұрын

    На самом деле я не пропадал, просто сделал себе не большой отпуск, праздники все же!!! ))

  • @ruslanshikhaliev9341
    @ruslanshikhaliev93416 жыл бұрын

    Здравствуйте. Подача информации замечательная ,буду вас советовать. Надеюсь у вас не гаснет мотивация ,вы стараетесь ,но людей что-то мало интересующихся(возможно конкретно этой тематикой).Спасибо, что делитесь своими навыками.

  • @_Fantom_.
    @_Fantom_.3 жыл бұрын

    Спасибо, отличный урок!

  • @temcodes
    @temcodes6 жыл бұрын

    Видео просто супер, спасибо вам большое!!!

  • @generousycompany1109
    @generousycompany11096 жыл бұрын

    Спасибо тебе Денис, Абсолютно все четко и досконально объясняешь , а главное все что делаешь) в других видео уроках они ленятся и пропускают))

  • @denisgorelov3236

    @denisgorelov3236

    6 жыл бұрын

    Спасибо.

  • @inzoddex8312
    @inzoddex83124 жыл бұрын

    И снова лайк, лучшее...

  • @user-ze5gd2pt6j
    @user-ze5gd2pt6j6 жыл бұрын

    Автору БОЛЬШОЕ СПАСИБО за полезный урок, здоровья Вам и удачи, за такие видосы.

  • @denisgorelov3236

    @denisgorelov3236

    6 жыл бұрын

    Спасибо!

  • @st4zhor822
    @st4zhor8226 жыл бұрын

    Супер уроки!! Легко и доступно для обучения.

  • @denisgorelov3236
    @denisgorelov32366 жыл бұрын

    В видео есть неточность на 3:20 Значение column не применяется к поперечной оси, свойство flex-direction применяется только в главной оси. Для поперечной align-items, align-self (для отдельно взятого элемента) и align-content для выравнивания всех "шампуров" в контейнере. Спасибо пользователю GaponovaT который на это обратил внимание.

  • @maksigors
    @maksigors6 жыл бұрын

    Спасибо, отличное видео! Прояснил для себя несколько вещей связанных со флексами.

  • @seriogaromanchykov9451
    @seriogaromanchykov94516 жыл бұрын

    Всё классно преподнесено, спасибо. Ждём GRID CSS :)

  • @user-mn2jy3rg5b
    @user-mn2jy3rg5b6 жыл бұрын

    Я месяц смотрел один канал, где автор всё флоатил, всем дивам пихал вручную размеры и т.д... На свой первый, весьма топорный сайт я потратил неделю и 400 капель валерьянки. Почему этот канал не попался мне на глаза раньше? Спасибо большое и успехов в дальнейшей работе! Лайк, подписка, уважуха!

  • @denisgorelov3236

    @denisgorelov3236

    6 жыл бұрын

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

  • @Evgeniy_Sugonyako
    @Evgeniy_Sugonyako6 жыл бұрын

    Братюнь, спасибо тебе огромное. Подписался и на вк и на канал. Поставили мне тут задачу сайт сделать, хотя я инженер, но как ты знаешь - это тыжпрограммист. Прям выручил, показал куда копать)))

  • @ideagame3633
    @ideagame36336 жыл бұрын

    круто

  • @user-xz9yx7su4q
    @user-xz9yx7su4q6 жыл бұрын

    Можешь сделать урок по какому-то адаптивному слайдеру на сайт? А так ты вообще молодец, много полезных, интересных и качественно снятых видео на канале)

  • @denisgorelov3236

    @denisgorelov3236

    6 жыл бұрын

    Могу, но пока с временем загвоздка обещать не буде. Спасибо за комментарий.

  • @GaponovaT
    @GaponovaT6 жыл бұрын

    Привет, Денис! В видео есть неточность на 3.20 Значение column не применяется к поперечной оси, свойство flex-direction применяется только в главной оси. Для поперечной align-items, align-self (для отдельно взятого элемента) и align-content для выравнивания всех "шампуров" в контейнере. Поправь меня, если не так. За урок большое спасибо, материал полезный. Очень доходчиво действуют динамические пояснения :)

  • @denisgorelov3236

    @denisgorelov3236

    6 жыл бұрын

    Да абсолютно верно, спасибо что поправили.

  • @zack11th
    @zack11th6 жыл бұрын

    Круто! Спасибо большое за отличный контент))) Разобрался в основных моментах этого флекса, а то по наитию раньше делал и как попало))))теперь более осмысленно. Надеюсь, разберешь все его свойства до конца)))) И еще вопрос: расскажи пожалуйста (или подскажи как правильно задать запрос в гугле) как сделать автообновление браузера как у тебя? то есть, ты пишешь букву в phpstorm и она сразу в браузере отображается) никак не могу найти правильную формулировку длятгугла)))))

  • @denisgorelov3236

    @denisgorelov3236

    6 жыл бұрын

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

  • @zack11th

    @zack11th

    6 жыл бұрын

    DWS TV - Уроки по WEB разработкам, Спасибо!)

  • @user-yq5vy6sl5o
    @user-yq5vy6sl5o6 жыл бұрын

    Про шампур у Дмитрия Лаврика слышал

  • @AndrewMarsin

    @AndrewMarsin

    6 жыл бұрын

    Кроме шампура иного примера и не придумать...

  • @zamid

    @zamid

    6 жыл бұрын

    А я у сталика ханкишиева

  • @aswonder5569
    @aswonder55695 жыл бұрын

    А как это будет работать у плохо видящего пользователя, включившего использование крупных шрифтов? Ведь все размеры в пикселях.

  • @ivkis3270
    @ivkis32706 жыл бұрын

    Давай уроки bootstrap 4? Или хоть расскажи отличия bootstrap 4 от bootstrap 3)

  • @denisgorelov3236

    @denisgorelov3236

    6 жыл бұрын

    bootstrap 4 пока в альфе, на боевых проектах не рекомендую пока использовать. Основные его отличия от bootstrap 3, то что поддерживает flexbox, заменили (px) на (em и rem), добавили еще один брейкпоинт (col-xl-) на макс. ширину в 1140 рх. и дополнительно всякие фишки такие как обновили дизайн, появились дополнительные классы как пример container-fluid для резиновой верстки, и немного улучшен функционал, но все равно, сравнивая его с CSS Grid, он ему уступает. Возможно как выйдет в релиз там сделаю обзор, а пока сам пользуюсь третьим.

  • @ivkis3270

    @ivkis3270

    6 жыл бұрын

    DWS TV - Уроки по WEB разработкам спасибо большое за ваш ответ :)

  • @tlifo
    @tlifo6 жыл бұрын

    Денис, а почему вы писали ul.top-menu, а не .top-menu ul?

  • @denisgorelov3236

    @denisgorelov3236

    6 жыл бұрын

    при таком случае (.top-menu ul) вы отберете все дочерние элементы UL в родителе, а нам нужен сам родитель.

  • @cergeysvobodin5453
    @cergeysvobodin54535 жыл бұрын

    Здравствуйте, а на каком редакторе пишите код? Или пользуетесь несколькими?

  • @denisgorelov3236

    @denisgorelov3236

    5 жыл бұрын

    Каким софтом пользуюсь смотри в группе VK

  • @MaxLimas
    @MaxLimas5 жыл бұрын

    Какая же муторная адаптация под мобилки в сравнении с css grid

  • @rand_name6734
    @rand_name67345 жыл бұрын

    А кто дизлайки ставит?

  • @systemconnect3096
    @systemconnect30965 жыл бұрын

    Много чего не объясняется, короче эти видосы не для новичков