CSS Display свойство. Разбираем типы отображения block, inline-block, flex.
HTML-код
- Опубликовано: 25 авг 2019
- В этом уроке разбираемся с типами отображения в CSS, а именно с display: block, inline-block, inline, flex. Дополнительно разберем как выровнять блоки с помощью flex (justify-content, align-items). Базовые и необходимые знания
css для начинающих, которые решили стать верстальщиками или веб-разработчиками.
не знал, что у Мармока есть канал по верстке
Лучшее объяснение свойства display на youtube!!
Worcester Souse рад слышать🙂
@@temofart не только на ютьюб, прохожу курсы платные там эту тему не понял, перечитал уже раз 5, а тут с одного видео все сразу стало ясно, спасибо!
@@user-lg5ze7vd4o чьи курсы, если не секрет??
ЧЕЛ,СПАСИБО ОГРОМНОЕ,ПРОДОЛЖАЙ В ТОМ ЖЕ ДУХЕ,САМОЕ ЛУЧШЕЕ ОБЪЯСНЕНИЕ ДАЛ,ЭТО ШЕДЕВР,ЖЕЛАЮ ПРОЦВЕТАНИЮ КАНАЛА!!!))Я наконец разобрался в том,что так долго не мог запомнить)Спасибо тебе!))
ты просто сказка, за 1 видос понял то, чего не мог понять неделю, может не так объясняли или ещё чего, но я прям многое догнал всего лишь за одно твоё видео, спасибо
Монтаж помогает расслабиться , спасибо за best tutorial
Лайк за "Тесто" - )) и еще один лайк за хорошие объяснение. Автору огромное спасибо!
Спасибо очень помог всё просто и понятно! То как вы подаёте материал это самый лучший и наглядный способ для учащихся! Продолжайте !
многое понял, просто и доступно объяснил
Чувак, спасибо! Очень полезная инфа
Кайф! Приятно разбираться в верстке под такие уроки :)
лучи бобра тебе, ты оч крутой, надеюсь, ты никогда не забросишь это дело) спасибо
как же классно, спасибо тебе, удачи!
помог понять тему, которую другие разжевать не могут, спасибо
под такую музыку прям и хочется заниматься!)
Спасибо! Это была самая понятная для меня подача!
Очень полезное видео, всё понятно объясняешь, препод объясняет не так, приходится самому досматривать. Подписка и лайк однозначно !!!
Спасибо за видео! Приятно слушать, всё понятно.
Это самое понятное объяснение!!! Благодарю!
На Марсе классно) Спасибо за понятное объяснение.
Оч круто! Спасибо!❤
Четко, внятно, понятно. Спасибо!
Спасибо, за такое качественное объяснение
На Марсе классно 🔥🔥)))
спасибо большое! Все очень доступно для понимания.
Большое тебе спасибо,легко понимаю твои уроки
Спасибо большое,повторила к собесу,зашло отлично!!!
Спасибо большое, так понятно все разложил!
Спасибо, все подробно и понятно!)
Бро, спасибо четко точно лаконично)))
очень развернуто , за это спасибо в двойне. посылаю лучи добра)
Зачем было в видео вставлять себя? Закрывает некоторые функции кода и примеров
за пару сек я исправил ошибку блока кнопки посмотря твоё видео, ПОДПИСКА 🙃
Спасибо! Очень помогло в понимании!
Очень доходчиво! Благодарю. Пошёл переделывать лендос )
Красаучек, я с тобой за пару дней столько понял... Теорию сам читаю в инете, а тут свего рода практика. Сенк!
Спасибо✌️
Прекрасно!Благодарю👍
Хорошее видео, лайк за нойза в конце
Спасибо!!! всё понятно
спасибо за объяснение
Огромная благодарность!
Ну несмотря на этого большое спасибо тебе, очень аккуратно обясняешь,,,!!!
Спасибо большое ✨✨✨♥️
Очень понравилось, спасибО!!
Круто объясняешь молодец👍
sposibo otlichno obyasnil
оч круто, респект
однозначно лайк
нет вопросов проста шикарная объяснение спасибо
Подписка. Однозначно.
спасибо просто и доходчиво
Спасибо!
Спасибо большое за доступное объяснение материала. Все очень понятно и просто :)
Лайк классно обьясняет
super!! spasibo
Пасибо !
Спасибо большое, хи
Каеф, спасибо!
годный контент 👍
Спасибо.
Thank you
Спасибо
Если бы я захотел создать рыцарский орден программистов, то ты бы заслуженно возглавил его. Я посмотрел меньше минуты видео И У МЕНЯ УЖЕ ПОЛУЧИЛОСЬ ТО ,С ЧЕМ Я БИЛСЯ ЧАСОВ 6, в то время как другие гайды ничем не помогали.
Счастья тебе и всего замурчательного~
Спасибо за такой отзыв😊🔥🤙
голос как у мармока) пасибо, очень помог!
все отлично, только музыку нужно тише и без слов
А если задавать max-height, как сжать текст, есть ли такая возможность?
Спасибо, очень помог, все описано подробно, но мне кажется камера по среди экрана мешает
👍👍👍👍👍
Привет, подскажи пожалуйста, вот у меня четыре блока и я не хочу выстраивать из в одну строку, а хочу сделать два и два под первыми блоками, как это решить?
Добрый день ! У вас есть уроки по JavaScript ? (интересуюсь созданием поисковика по сайту )
За Нойза отдельный поклон
👍
Давай так же понятно о JavaScript)
что за редактор кода у тебя?
Спасибо, помог!!
очень хорошее видео, бро. только не видно стили из-за вебки)
Простите за глупый вопрос, если блочный элемент занимает всю строку как тогда float подстраивает их в одну строку
Вот этот пырень понятно объясняет
Кто нибудь знает что за программа или дополнение через которую ты смотришь полученный результат как у автора ?
Live Preview
Спасибо))
автор в конце ролика спрашивает на какую тему еще поговорить, не знаю актуально это сейчас или нет , хотелось бы посмотреть видео на тему меню сайта и все что с этим связано
Я бы хотел узнать, после изучения HTML и CSS нужно учить JS или PHP? Или вообще план обучения должен быть иным?А также, когда начинать учить Bootstrap или что то подобное? Заранее спасибо!
Когда знание верстки будет на хорошем уровне ты сам начинаешь понимать что тебе дальше нужно. А хороший уровень - это когда ты уже работаешь в компании либо стабильно берешь заказы на фрилансе по верстке. Прыгать в программирование раньше , чем освоил верстку нет смысла, мое мнение
@@temofart со знанием одной лишь верстки тяжело устроиться в компанию(((
@@user-fy2yl5ri3l Согласен, что не просто, но такие вакансии есть. Я сам пришел в компанию еще будучи просто верстальщиком, хотя на фрилансе выполнял заказы на WordPress . Об этом стоит рассказать больше, есть несколько путей развития. Либо пойти по пути Vue/React, либо научиться работать с CMS типа вордпресс. Каждый из вариантов имеет свои преимущества и недостатки. Но смысл в том, что все это невозможно освоить не научившись верстать.
капец Чарли Дэй знает CSS
Можно попросить сделать обзор как сделать адаптивное меню с бургером!?
11:50
Подскажите, у меня 9 маленьких блоков в одну строку. Как сделать чтобы при уменьшении браузера, те блоки которые не влазят= скрывались ???
Свойство overflow-x скрывает все, что выходит за пределы элемента.
@@temofart Ого как оперативно )) Спасибо. Но появилась проблема, он просто обрезает блоки по краям. А хотелось бы чтобы чтобы он их целиком не показывал если не влазеет .
В вёрстке такой возможности нет. Но и сам вопрос звучит необычно, возможно нужно другое решение. Например, чтобы в адаптивной вёрстке все влезало, а не пропадало) или с помощью медиа запросов можно описать поведение всех блоков на каждом этапе, даже если нужно их по очереди убирать
@@temofart Просто передо мной стоит задача - Разместить 12 (маленьких) блоков во всю ширину экрана одной строкой. Нельзя использовать js, только css и html
При изменениях экрана все должно работать корректно, блоки растягиваться на
всю ширину, а те, что не влезают - скрываться. Ничего подсказать не можете ?))
@@temofart А если написать flex-wrap: wrap; (то есть перенести все что не влезает на вторую строку, а вторую строку скрыть )Так получится ?
!!!
+
Очень хотелось бы знать : как и в каких случаях текст влияет на размеры блока и как он (текст) может менять эти размеры?
капец иван ургант второй канал открыл
фанаты гуфа и центра сразу видно)
Его Вебкамера мешает я не вижу часть кода CSS
Попробуй найди другое видео по этой теме
Спасибо, но было бы лучше без фоновой музыки, мое мнение.
Спасибо. Видео в ютубе - творчество, поэтому хочется делать так, как нравится. На любое творчество найдутся те, кому нравится - а кому нет)
Sweating Поддерживаю комментарий. Музыка очень мешает и отвлекает. Без неё было лучше.
Это вообще странная мода, ставить музыку фоном, при объяснении важных принципов.
Музыка держит в тонусе, скучно же. Я, например, работаю под музыку, решая сложные задачи, как и многие мои коллеги. А в офисе столько посторонних звуков, что музыка будет лучшим вариантом среди них, нужно научиться фокусироваться на задаче отключая в голове все лишнее)
прикольно, но почему квадратик с вашим лицом заслоняет весь код css) но про флекс всё доходчиво! спасибо лайк
Я старался, чтобы нужный код было видно. Но в любом случае это первые видео, дальше я изменил подход)
добавь код блоков что бы скачали . У меня не работает ((((
фон громковат
Привет братан, извини, но flex-direction:row, column, row-reverse, column-reverseвсё про этих фишек забыл говорить!!!!
А где grid, flow layout
3 года назад использовать в продуктовых проектах гриды было рано, а новичкам знать все сразу необязательно.
ничего не поняла
Ты случаем не брат мармока?
Та не похожи мы )
@@temofart но голос ощущается :>
Ну ёёёмаё, нам видос нужен а не ты)))) Весь код перекрыл лицом, ппц.
Зачем тебе код? Он объясняет для чего нужен код, ты должен быть уже с ним ознакомлен.
@@kuskauu2946 Капец ты Эйнштейн.
@@MaratHighlanderУдачи по пути програмиста)
Кто-нибудь отключите эту музыку!!!!!!!!!!!!!!!!!!!