CSS Display свойство. Разбираем типы отображения block, inline-block, flex.

  Рет қаралды 43,309

temofart

temofart

4 жыл бұрын

В этом уроке разбираемся с типами отображения в CSS, а именно с display: block, inline-block, inline, flex. Дополнительно разберем как выровнять блоки с помощью flex (justify-content, align-items). Базовые и необходимые знания
css для начинающих, которые решили стать верстальщиками или веб-разработчиками.

Пікірлер: 133
@ultraduck100
@ultraduck100 3 жыл бұрын
не знал, что у Мармока есть канал по верстке
@vladimirpuzey713
@vladimirpuzey713 4 жыл бұрын
Лучшее объяснение свойства display на youtube!!
@temofart
@temofart 4 жыл бұрын
Worcester Souse рад слышать🙂
@user-lg5ze7vd4o
@user-lg5ze7vd4o 3 жыл бұрын
@@temofart не только на ютьюб, прохожу курсы платные там эту тему не понял, перечитал уже раз 5, а тут с одного видео все сразу стало ясно, спасибо!
@andreiBylkin
@andreiBylkin 3 жыл бұрын
@@user-lg5ze7vd4o чьи курсы, если не секрет??
@protagonist_proradersnion
@protagonist_proradersnion 3 жыл бұрын
ЧЕЛ,СПАСИБО ОГРОМНОЕ,ПРОДОЛЖАЙ В ТОМ ЖЕ ДУХЕ,САМОЕ ЛУЧШЕЕ ОБЪЯСНЕНИЕ ДАЛ,ЭТО ШЕДЕВР,ЖЕЛАЮ ПРОЦВЕТАНИЮ КАНАЛА!!!))Я наконец разобрался в том,что так долго не мог запомнить)Спасибо тебе!))
@sndk2267
@sndk2267 2 ай бұрын
Очень полезное видео, всё понятно объясняешь, препод объясняет не так, приходится самому досматривать. Подписка и лайк однозначно !!!
@_goldmanv5925
@_goldmanv5925 2 жыл бұрын
Лайк за "Тесто" - )) и еще один лайк за хорошие объяснение. Автору огромное спасибо!
@user-rl9mk1hw4b
@user-rl9mk1hw4b 4 жыл бұрын
Монтаж помогает расслабиться , спасибо за best tutorial
@user-tj7md9ct1s
@user-tj7md9ct1s 2 жыл бұрын
ты просто сказка, за 1 видос понял то, чего не мог понять неделю, может не так объясняли или ещё чего, но я прям многое догнал всего лишь за одно твоё видео, спасибо
@prostoprofi4385
@prostoprofi4385 3 жыл бұрын
Спасибо очень помог всё просто и понятно! То как вы подаёте материал это самый лучший и наглядный способ для учащихся! Продолжайте !
@andreiBylkin
@andreiBylkin 3 жыл бұрын
Кайф! Приятно разбираться в верстке под такие уроки :)
@kasparbiekies186
@kasparbiekies186 4 жыл бұрын
под такую музыку прям и хочется заниматься!)
@admiralalamin
@admiralalamin 3 жыл бұрын
как же классно, спасибо тебе, удачи!
@Idamshop
@Idamshop 5 ай бұрын
многое понял, просто и доступно объяснил
@user-nr8ke8qw2g
@user-nr8ke8qw2g 3 жыл бұрын
Это самое понятное объяснение!!! Благодарю!
@user-tn1vz6vr8y
@user-tn1vz6vr8y 3 жыл бұрын
Большое тебе спасибо,легко понимаю твои уроки
@deolvap
@deolvap 4 ай бұрын
Спасибо за видео! Приятно слушать, всё понятно.
@dom_Poerinionte
@dom_Poerinionte 2 жыл бұрын
Четко, внятно, понятно. Спасибо!
@dmitry_kolom
@dmitry_kolom Жыл бұрын
Спасибо, за такое качественное объяснение
@user-oj9qd4hq5j
@user-oj9qd4hq5j 4 жыл бұрын
помог понять тему, которую другие разжевать не могут, спасибо
@Nataly90mak
@Nataly90mak 4 жыл бұрын
спасибо большое! Все очень доступно для понимания.
@user-zw9mp2fd7d
@user-zw9mp2fd7d Жыл бұрын
Спасибо большое, так понятно все разложил!
@desenchantee7
@desenchantee7 Жыл бұрын
Спасибо! Это была самая понятная для меня подача!
@romanpit4you361
@romanpit4you361 Жыл бұрын
Спасибо, все подробно и понятно!)
@lisov1k492
@lisov1k492 Жыл бұрын
На Марсе классно) Спасибо за понятное объяснение.
@Mayhem888
@Mayhem888 2 жыл бұрын
Спасибо! Очень помогло в понимании!
@tor8564
@tor8564 Жыл бұрын
Оч круто! Спасибо!❤
@sandusgoga9676
@sandusgoga9676 3 жыл бұрын
Прекрасно!Благодарю👍
@izobretateldobra
@izobretateldobra 4 жыл бұрын
Очень доходчиво! Благодарю. Пошёл переделывать лендос )
@polinaevtuhova8247
@polinaevtuhova8247 2 жыл бұрын
Спасибо большое,повторила к собесу,зашло отлично!!!
@issssam5853
@issssam5853 10 ай бұрын
спасибо за объяснение
@user-qt9wr4kq8e
@user-qt9wr4kq8e Жыл бұрын
лучи бобра тебе, ты оч крутой, надеюсь, ты никогда не забросишь это дело) спасибо
@runup1569
@runup1569 Жыл бұрын
Спасибо!!! всё понятно
@sokolovoleh
@sokolovoleh Жыл бұрын
Огромная благодарность!
@vollyyaa
@vollyyaa 9 ай бұрын
Бро, спасибо четко точно лаконично)))
@nursayazhanabay353
@nursayazhanabay353 Жыл бұрын
Спасибо большое ✨✨✨♥️
@w1erley
@w1erley 4 жыл бұрын
Очень понравилось, спасибО!!
@benotepanyan9464
@benotepanyan9464 3 жыл бұрын
Ну несмотря на этого большое спасибо тебе, очень аккуратно обясняешь,,,!!!
@user-ds1hj3yv2g
@user-ds1hj3yv2g 3 жыл бұрын
Круто объясняешь молодец👍
@cam-onchannel
@cam-onchannel Жыл бұрын
На Марсе классно 🔥🔥)))
@user-fs9dq8xy5m
@user-fs9dq8xy5m 4 жыл бұрын
очень развернуто , за это спасибо в двойне. посылаю лучи добра)
@mikhailmir9501
@mikhailmir9501 4 жыл бұрын
Зачем было в видео вставлять себя? Закрывает некоторые функции кода и примеров
@user-it7jm2bd3m
@user-it7jm2bd3m 2 жыл бұрын
нет вопросов проста шикарная объяснение спасибо
@shanthakobyan3578
@shanthakobyan3578 3 жыл бұрын
sposibo otlichno obyasnil
@GennadiyDchamanov
@GennadiyDchamanov 3 жыл бұрын
спасибо просто и доходчиво
@denisromanyuk729
@denisromanyuk729 4 жыл бұрын
Красаучек, я с тобой за пару дней столько понял... Теорию сам читаю в инете, а тут свего рода практика. Сенк!
@temofart
@temofart 4 жыл бұрын
Спасибо✌️
@user-um2qe7rs3v
@user-um2qe7rs3v 2 жыл бұрын
Подписка. Однозначно.
@leonidpogojii9649
@leonidpogojii9649 Жыл бұрын
Хорошее видео, лайк за нойза в конце
@EvilGazz
@EvilGazz 4 жыл бұрын
Спасибо!
@anastasiiah2784
@anastasiiah2784 2 жыл бұрын
super!! spasibo
@sanya8158
@sanya8158 3 жыл бұрын
Спасибо большое, хи
@user-de8sv9wp5d
@user-de8sv9wp5d Жыл бұрын
Лайк классно обьясняет
@deorfeal5657
@deorfeal5657 3 жыл бұрын
Пасибо !
@scankomp241
@scankomp241 2 жыл бұрын
за пару сек я исправил ошибку блока кнопки посмотря твоё видео, ПОДПИСКА 🙃
@user-xl9bm9wf8h
@user-xl9bm9wf8h 4 жыл бұрын
Каеф, спасибо!
@zardima8123
@zardima8123 3 жыл бұрын
однозначно лайк
@user-jc4fs6gy2k
@user-jc4fs6gy2k 2 жыл бұрын
Спасибо.
@jugo-stream
@jugo-stream 3 жыл бұрын
годный контент 👍
@mrvktr8721
@mrvktr8721 Жыл бұрын
оч круто, респект
@MyakishMops
@MyakishMops Жыл бұрын
Спасибо
@gigoshkin
@gigoshkin 4 жыл бұрын
Спасибо, очень помог, все описано подробно, но мне кажется камера по среди экрана мешает
@irinachepurna6013
@irinachepurna6013 4 жыл бұрын
Спасибо большое за доступное объяснение материала. Все очень понятно и просто :)
@kristinagevorgyan1095
@kristinagevorgyan1095 4 жыл бұрын
Thank you
@sweetsforsweets6488
@sweetsforsweets6488 3 жыл бұрын
Добрый день ! У вас есть уроки по JavaScript ? (интересуюсь созданием поисковика по сайту )
@user-kv2xb8dl8y
@user-kv2xb8dl8y 3 жыл бұрын
голос как у мармока) пасибо, очень помог!
@firekeeper7461
@firekeeper7461 3 жыл бұрын
Если бы я захотел создать рыцарский орден программистов, то ты бы заслуженно возглавил его. Я посмотрел меньше минуты видео И У МЕНЯ УЖЕ ПОЛУЧИЛОСЬ ТО ,С ЧЕМ Я БИЛСЯ ЧАСОВ 6, в то время как другие гайды ничем не помогали. Счастья тебе и всего замурчательного~
@temofart
@temofart 3 жыл бұрын
Спасибо за такой отзыв😊🔥🤙
@Makswell-oo5gu
@Makswell-oo5gu 3 жыл бұрын
Давай так же понятно о JavaScript)
@nikitadv777
@nikitadv777 4 жыл бұрын
Я бы хотел узнать, после изучения HTML и CSS нужно учить JS или PHP? Или вообще план обучения должен быть иным?А также, когда начинать учить Bootstrap или что то подобное? Заранее спасибо!
@temofart
@temofart 4 жыл бұрын
Когда знание верстки будет на хорошем уровне ты сам начинаешь понимать что тебе дальше нужно. А хороший уровень - это когда ты уже работаешь в компании либо стабильно берешь заказы на фрилансе по верстке. Прыгать в программирование раньше , чем освоил верстку нет смысла, мое мнение
@user-fy2yl5ri3l
@user-fy2yl5ri3l 4 жыл бұрын
@@temofart со знанием одной лишь верстки тяжело устроиться в компанию(((
@temofart
@temofart 4 жыл бұрын
@@user-fy2yl5ri3l Согласен, что не просто, но такие вакансии есть. Я сам пришел в компанию еще будучи просто верстальщиком, хотя на фрилансе выполнял заказы на WordPress . Об этом стоит рассказать больше, есть несколько путей развития. Либо пойти по пути Vue/React, либо научиться работать с CMS типа вордпресс. Каждый из вариантов имеет свои преимущества и недостатки. Но смысл в том, что все это невозможно освоить не научившись верстать.
@konglomora227
@konglomora227 3 жыл бұрын
За Нойза отдельный поклон
@andrew2340
@andrew2340 2 жыл бұрын
👍
@lifelive7078
@lifelive7078 3 жыл бұрын
👍👍👍👍👍
@SlarkShark31415
@SlarkShark31415 Жыл бұрын
все отлично, только музыку нужно тише и без слов
@arturperel
@arturperel Жыл бұрын
А если задавать max-height, как сжать текст, есть ли такая возможность?
@bpospanov
@bpospanov 4 жыл бұрын
очень хорошее видео, бро. только не видно стили из-за вебки)
@good666fella
@good666fella 4 жыл бұрын
Спасибо, помог!!
@user-vz6ss2ct1t
@user-vz6ss2ct1t Жыл бұрын
Привет, подскажи пожалуйста, вот у меня четыре блока и я не хочу выстраивать из в одну строку, а хочу сделать два и два под первыми блоками, как это решить?
@sulejmanpovelitel1220
@sulejmanpovelitel1220 Жыл бұрын
автор в конце ролика спрашивает на какую тему еще поговорить, не знаю актуально это сейчас или нет , хотелось бы посмотреть видео на тему меню сайта и все что с этим связано
@Bakytov
@Bakytov 3 жыл бұрын
Простите за глупый вопрос, если блочный элемент занимает всю строку как тогда float подстраивает их в одну строку
@user-hl2el5cz8e
@user-hl2el5cz8e Ай бұрын
что за редактор кода у тебя?
@sweetsforsweets6488
@sweetsforsweets6488 3 жыл бұрын
Подскажите, у меня 9 маленьких блоков в одну строку. Как сделать чтобы при уменьшении браузера, те блоки которые не влазят= скрывались ???
@temofart
@temofart 3 жыл бұрын
Свойство overflow-x скрывает все, что выходит за пределы элемента.
@sweetsforsweets6488
@sweetsforsweets6488 3 жыл бұрын
@@temofart Ого как оперативно )) Спасибо. Но появилась проблема, он просто обрезает блоки по краям. А хотелось бы чтобы чтобы он их целиком не показывал если не влазеет .
@temofart
@temofart 3 жыл бұрын
В вёрстке такой возможности нет. Но и сам вопрос звучит необычно, возможно нужно другое решение. Например, чтобы в адаптивной вёрстке все влезало, а не пропадало) или с помощью медиа запросов можно описать поведение всех блоков на каждом этапе, даже если нужно их по очереди убирать
@sweetsforsweets6488
@sweetsforsweets6488 3 жыл бұрын
@@temofart Просто передо мной стоит задача - Разместить 12 (маленьких) блоков во всю ширину экрана одной строкой. Нельзя использовать js, только css и html При изменениях экрана все должно работать корректно, блоки растягиваться на всю ширину, а те, что не влезают - скрываться. Ничего подсказать не можете ?))
@sweetsforsweets6488
@sweetsforsweets6488 3 жыл бұрын
@@temofart А если написать flex-wrap: wrap; (то есть перенести все что не влезает на вторую строку, а вторую строку скрыть )Так получится ?
@paulblog2438
@paulblog2438 4 жыл бұрын
Спасибо))
@lilokino94
@lilokino94 3 жыл бұрын
Вот этот пырень понятно объясняет
@freedomjustice7069
@freedomjustice7069 2 жыл бұрын
Кто нибудь знает что за программа или дополнение через которую ты смотришь полученный результат как у автора ?
@temofart
@temofart 2 жыл бұрын
Live Preview
@user-zw9mp2fd7d
@user-zw9mp2fd7d Жыл бұрын
Можно попросить сделать обзор как сделать адаптивное меню с бургером!?
@user-gl8qs7qj4k
@user-gl8qs7qj4k 2 жыл бұрын
капец Чарли Дэй знает CSS
@user-xe4be7iq1q
@user-xe4be7iq1q 17 күн бұрын
11:50
@nicksakovich6500
@nicksakovich6500 2 ай бұрын
!!!
@abl1ght
@abl1ght 2 жыл бұрын
Его Вебкамера мешает я не вижу часть кода CSS
@temofart
@temofart 2 жыл бұрын
Попробуй найди другое видео по этой теме
@miragadzafarli1014
@miragadzafarli1014 4 жыл бұрын
добавь код блоков что бы скачали . У меня не работает ((((
@zacktherussian3617
@zacktherussian3617 4 жыл бұрын
фанаты гуфа и центра сразу видно)
@user-vt1xz8sx7i
@user-vt1xz8sx7i 4 жыл бұрын
Спасибо, но было бы лучше без фоновой музыки, мое мнение.
@temofart
@temofart 4 жыл бұрын
Спасибо. Видео в ютубе - творчество, поэтому хочется делать так, как нравится. На любое творчество найдутся те, кому нравится - а кому нет)
@denpro9712
@denpro9712 4 жыл бұрын
Sweating Поддерживаю комментарий. Музыка очень мешает и отвлекает. Без неё было лучше. Это вообще странная мода, ставить музыку фоном, при объяснении важных принципов.
@temofart
@temofart 4 жыл бұрын
Музыка держит в тонусе, скучно же. Я, например, работаю под музыку, решая сложные задачи, как и многие мои коллеги. А в офисе столько посторонних звуков, что музыка будет лучшим вариантом среди них, нужно научиться фокусироваться на задаче отключая в голове все лишнее)
@hologramprint6292
@hologramprint6292 4 жыл бұрын
прикольно, но почему квадратик с вашим лицом заслоняет весь код css) но про флекс всё доходчиво! спасибо лайк
@temofart
@temofart 4 жыл бұрын
Я старался, чтобы нужный код было видно. Но в любом случае это первые видео, дальше я изменил подход)
@8dog574
@8dog574 4 жыл бұрын
+
@user-gl8qs7qj4k
@user-gl8qs7qj4k 3 жыл бұрын
капец иван ургант второй канал открыл
@arturperel
@arturperel Жыл бұрын
А где grid, flow layout
@temofart
@temofart Жыл бұрын
3 года назад использовать в продуктовых проектах гриды было рано, а новичкам знать все сразу необязательно.
@maximmaximov1038
@maximmaximov1038 3 жыл бұрын
Очень хотелось бы знать : как и в каких случаях текст влияет на размеры блока и как он (текст) может менять эти размеры?
@benotepanyan9464
@benotepanyan9464 3 жыл бұрын
Привет братан, извини, но flex-direction:row, column, row-reverse, column-reverseвсё про этих фишек забыл говорить!!!!
@vr4836
@vr4836 3 жыл бұрын
фон громковат
@kittycat3226
@kittycat3226 3 жыл бұрын
ничего не поняла
@kuskauu2946
@kuskauu2946 3 жыл бұрын
Ты случаем не брат мармока?
@temofart
@temofart 3 жыл бұрын
Та не похожи мы )
@kuskauu2946
@kuskauu2946 3 жыл бұрын
@@temofart но голос ощущается :>
@MaratHighlander
@MaratHighlander 3 жыл бұрын
Ну ёёёмаё, нам видос нужен а не ты)))) Весь код перекрыл лицом, ппц.
@kuskauu2946
@kuskauu2946 3 жыл бұрын
Зачем тебе код? Он объясняет для чего нужен код, ты должен быть уже с ним ознакомлен.
@MaratHighlander
@MaratHighlander 3 жыл бұрын
@@kuskauu2946 Капец ты Эйнштейн.
@kuskauu2946
@kuskauu2946 3 жыл бұрын
@@MaratHighlanderУдачи по пути програмиста)
@myganter
@myganter 3 жыл бұрын
Кто-нибудь отключите эту музыку!!!!!!!!!!!!!!!!!!!
@alexandrmoskalev8642
@alexandrmoskalev8642 3 жыл бұрын
Контент хороший, но зачем эту убогую музыку было вставлять?
@temofart
@temofart 3 жыл бұрын
Потому что она мне нравится)
@alexandrmoskalev8642
@alexandrmoskalev8642 3 жыл бұрын
@@temofart это хорошо), но она отвлекает...Особенно когда слова в середине появляются, и не понятно кого именно слушать)
What is the difference between Float, Flexbox and Grid CSS?
10:06
Анна Блок
Рет қаралды 217 М.
¡Puaj! No comas piruleta sucia, usa un gadget 😱 #herramienta
00:30
JOON Spanish
Рет қаралды 23 МЛН
FLEXBOX начало. Флексбокс верстка.
44:38
От 0 до 1
Рет қаралды 45 М.
Learn CSS Positioning Quickly With A Real World Example
8:32
Slaying The Dragon
Рет қаралды 572 М.
Learn CSS display property in 4 minutes! 🧱
4:13
Bro Code
Рет қаралды 44 М.