Обёртка (flex-wrap) элементов в Flexbox

Рет қаралды 10,649

4 жыл бұрын

Сегодня мы рассмотрим свойство flex-wrap из модуля flexbox. После просмотра этого видео вы будете знать, как работает свойство flex-wrap, какие значения оно может принимать. верстка сайта состоит из блоков, которые иногда должны идти строго в 1 строку, а иногда нужно, чтобы эти блоки переносились на новую строку. В этом нам как раз и поможет свойство flex-wrap
В этом видео мы рассмотрим такие значения как - nowrap, wrap, wrap-reverse

Пікірлер: 53

@prosto_razrabotka 3 жыл бұрын

Не забудьте заглянуть сюда: ❓ Запись на консультацию - prosto-razrabotka.ru/ ✨ Telegram канал - t.me/prostorazrabotka/ 🔥 Telegram чат - t.me/prostorazrabotkachat/ Можете добавиться в друзья: 📷 Instagram - instagram.com/vitaliy.kirenkov/ 📘 ВКонтакте - vk.com/vitaliy.kirenkov/ 📗 Facebook - facebook.com/vitaliy.kirenkov/ 📙 LinkedIn - www.linkedin.com/in/kirenkov/ ✏️ Twitter - twitter.com/VitaliyKirenkov/ А так же, подписаться на страницы: 📘 ВКонтакте - vk.com/public195137161/ 📗 Facebook - facebook.com/prostorazrabotka/

@fanfan6692 4 жыл бұрын

По вашим урокам надо методички писать Великолепно! Огромное Вам спасибо

@user-ff3lc1et3u 3 жыл бұрын

Отличный урок. Все понятно

@alinadavydova1902 4 жыл бұрын

Спасибо огромное за то что уделяете своё время ради того чтобы нас етому научить,жду ище уроки по флекс боксам

@eemamichev 4 жыл бұрын

Огромное спасибо! Вы прекрасно подаете информацию!

@dustfellsans9705 2 жыл бұрын

Спасибо большое! Ваши видео очень полезны.

@user-pn2ev2je2l 4 жыл бұрын

Благодарю Вас за видео.

@user-gv3bq2jc4z 4 жыл бұрын

Если рассматривать флексы, гораздо больше вопросов вызывают свойства flex-grow, flex-shrink, align-content. Надеюсь по ним то же выйдут ролики. Хочу уже сверстать себе свою сетку и перестать подключать Bootstrap ради колов. Спасибо за ваш контент, круто что можно вот так постигать интересные темы у настоящего профи.

@MrSam-mh7ec 4 жыл бұрын

Интересный показ блока. Возьму на заметку. Спасибо вам огромное, удачи)

@oldodyn 4 жыл бұрын

Шикарное свойство. Позволяет разместить нужно кол-во элементов строке и при этом их легко сортировать

@Skif769 4 жыл бұрын

Все доступно!) Нужная штука Флексы

@hoonigan9118 3 жыл бұрын

Боже мой, где ты был раньше)

@user-hr8kz2zp6f 4 жыл бұрын

Спасибо большое! Очень профессионально.

@prosto_razrabotka 4 жыл бұрын

Спасибо

@pavel___8120 4 жыл бұрын

Спасибо за объяснение!

@prosto_razrabotka 4 жыл бұрын

Спасибо за просмотр)

@dilshodmirzaahmedov5458 4 жыл бұрын

Здравствуйте! Спасибо все понятно!

@prosto_razrabotka 4 жыл бұрын

Замечательно)

@camillam8315 Жыл бұрын

спасибо большое

@Lisa-yp8vf 3 жыл бұрын

Вы прекрасно преподаете!

@prosto_razrabotka 3 жыл бұрын

Благодарю

@user-ok7yj8tx9t 3 жыл бұрын

спасибо вам за урок !!!)))) лайк поставил и подписался

@prosto_razrabotka 3 жыл бұрын

Благодарю

@gameworld2956 4 жыл бұрын

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

@user-nj2ln1kh2r 4 жыл бұрын

Виталий, всё очень доступно и понятно!!!! Жду новых видео, тк сейчас изучаю html and css!!! Держи лайчанского!!

@prosto_razrabotka 4 жыл бұрын

Благодарю

@Cinegami3 4 жыл бұрын

Благодарю

@prosto_razrabotka 4 жыл бұрын

Спасибо вам, за положительные комментарии.

@user-bv7hw6bx2t 2 жыл бұрын

Спасибо за видео! Есть вопрос (для всех, кто может помочь). После применения свойства wrap столбцы из элементов прижались к левой части экрана. Как их можно выровнять по центру (в горизонтальной плоскости, по главной оси)?

@user-fv2eg9me7u 4 жыл бұрын

Спасибо,всё очень понятно,давно сам пользуюсь.Хотел бы увидеть ролик про функции в css и кроссбраузерную верстку ( вендорные префиксы(-ms-*, **-webkit-* и т.д.))

@prosto_razrabotka 4 жыл бұрын

Я про префиксы забыл уже очень давно. Для этого есть autoprefixer. Кроссбраузерная верстка... Ну что тут скажешь. Нормально делай, нормально будет -) А там где сталкиваешься с расхождениями уже разбираешься на месте.

@wickedtorpedo75 4 жыл бұрын

Пж сделай урок про использование max-width, max-height и min-width, min-height их очень сложно понять как мне кажется, да ище почему при: @media screen and (max-width: 1200px) { . . . } @media screen and (max-width: 950px) { . . . } @media screen and (max-width: 650px) { . . . } Адаптивность работает корректно, но по логике устройство с шириной 750px попадаются на сразу двух запросов, чтобы избежать от этого надо писать min-width, но в реальных сайтах так не делают, я сильно запутался. Да ище не понял такое: max-width: 600px; width: 100%; Чем это отличается от width: 600px, спасибо за внимание.

@qq-dq3tb 3 жыл бұрын

Насколько понял, в медиа запросе max, min это условия при которых стиль действует. max ограничивает значения сверху (не больше), min ограничивает значения снизу (не меньше). max-width как стиль говорит я не могу быть больше 600px. width: 100% говорит - я займу 100% свободного пространства по ширине. Но это не точно

@andreysv7752 4 жыл бұрын

крутое видео! было бы интересно по всем основным, используемым тобой, свойствам флексов что-то подобное увидеть

@prosto_razrabotka 4 жыл бұрын

Смотрите видео "Вёрстка макета из 6 блоков"

@andreysv7752 4 жыл бұрын

@@prosto_razrabotka благодарю

@prosto_razrabotka 4 жыл бұрын

Часто ли вы сталкиваетесь с необходимостью использования flex-wrap?

@user-nj2ln1kh2r 4 жыл бұрын

Сейчас у меня макет интернет-магазина, в котором данная функция подходит как нельзя кстати))) Я ее использовал для перемещения блоков с товарами.

@souichiX 4 жыл бұрын

вроде если не ошибаюсь можно же указывать по сколько именно вмещать в одну строку а не только переносить все

@mrleondono1461 4 жыл бұрын

Дождусь всех видосов по flex и буду выгрызать твои видосы

@youtuberelaxvideo 4 жыл бұрын

Молодец! Привет

@qq-dq3tb 3 жыл бұрын

nowrap 12345 wrap 123 45 wrap-reverse 45 123 хмм.Получается начинает заполнять обратно по кросс оси

@ne_psixyu 4 жыл бұрын

╔╗╔╗╔╗╦╗ ║╦║║║║║║ ╚╝╚╝╚╝╩╝ Не устаю писать комментарии, чтобы поспособствовать продвижению роликов в тренды Utube !!!

@prosto_razrabotka 4 жыл бұрын

Главное, чтоб они вам нравились)

@vladimirsherstyuk2906 4 жыл бұрын

Классный видос! Как сделать вращающийся круг с надписью по окружности ? Или где посмотреть

@ohme8863 4 жыл бұрын

css-tricks.com/set-text-on-a-circle/

@vladimirsherstyuk2906 4 жыл бұрын

@@ohme8863 thank you very mach

@-shakirov 3 жыл бұрын

как отступ справа убрать центрировать?

@speedsongs1082 3 жыл бұрын

а почему он иногда не работает "wrap" ?

@6ezymnuymax962 3 жыл бұрын

а ширину ему задавать нельзя ?

@AlexSizovRun 2 жыл бұрын

Куда пропал? (

@iGotton 4 жыл бұрын

Вот видите? Нет не видим, камера не прозрачная.

@_kie 4 жыл бұрын

Рубашку в клетку и линейку не стоит одевать - муар бъет по глазам. Лучше - что-нибудь однотонное.