Flexbox верстка | CSS для Профи
HTML-код
- Опубликовано: 4 апр 2019
- ПОДДЕРЖАТЬ АВТОРА И КАНАЛ:
www.liqpay.ua/ru/checkout/380...
Webmoney:
Z166344793421
R369744777501
U871336351200
Телеграмм чат:
t.me/joinchat/FQXf-hN9LRuCosQ...
Сегодня мы с вами пройдемся по теории и практике:
- Flex-контейнеры и flex-элементы.
- Главная и поперечная оси.
- Размеры элементов при flexbox-верстке.
МАТЕРИАЛЫ УРОКА:
drive.google.com/open?id=1Sgl...
БАЗОВЫЙ КУРС ПО HTML & CSS:
• Знакомство с основным ...
- Который час?
- 29:18
Спасибо большое! Ваши видео и мотивируют, и прекрасно обучают.У вас, определенно, талант.
29:18 четыре, пять, десять, пятого, пять, десть, пятого, четыре, пять))))))
Один шаг ближе к освоению css вёрстки) Спасибо!
Уже подписан и лайк есть. Курси по етому делу получились би отличними)
flex: 1 и flex: 3 это не значит что второй элемент в 3 раза больше, это значит что он забирает в 3 раза больше свободного пространства.
Например у вас 1000px контейнер, в нем 2 элемента у которых фикс ширина по 400px и 200px, по итогу flex: 1 и flex: 3 первый элемент будет иметь ширину 500px, и второй 500px.
Потрясающе!
Смотри нескольких блоггеров, но никто так не углубляется в детали, как Вы.
Лайк и подписка, однозначно! Спасибо Вам! 😌🙂
Спасибо за урок! Очень интересно слушать твои объяснения. Метод с выравниванием элемента во flexbox с помощью margin-left: auto - это бомба. Раньше не знал об этом и оборачивал в блок и давал дополнительные стили flex, justify-content, а теперь буду использовать margin-left: auto. Спасибо за этот способ
Дякую, Андрію, за чудові уроки
Спасибо большое! Классное видео!
Хорошее видео! Спасибо
Спасибо большое за урок, Вы хорошо объясняете
Видео мне понравилось, поставил лайк но ютуб его уже раз 5-ый забырает (
Автору спасибо за видео, и ждем каркас !)
Андрей, Вы лучший!
лайк лайк лайк! Я пробывал учить верстку по сайту хекслет, все кажется таким непонятным... по вашим видосам - все кажется таким простым. Надо будет ваш курс по Javascript заценить! Спасибо большое!
Удачного обучения!
Здравствуй. Ты писал этот комментарий давно. Мне просто интересно, как у тебя успехи?
спасибо за видео ! очень интересно бил
Видео супер! Андрей обьясняет понятно и просто. Смотрел с удовольствием, много интересного. Будут ли видео по Django? Прям очень надо. И vue js до кучи )
Cпасибо большое.
Поддерживаю комментом отличный канал
Чудесно, дякую.
Благодарю
Чувак ты новый Sorax )))
СПАСИБО
переделала предыдущие домашки с float, кода стало меньше, спасибо!
Вообще, по мере прохождения уроков как-то в голове уже заранее вырисовывается макет страницы, сознательнее раздаю имена классам, но хотелось бы услышать от опытных верстальщиков, как принято какие блоки обзывать (типо wrapper там, еще что)
Здравствуйте и спасибо за урок. Несколько вопросов:
1. Есть ли разница в написании: .site-nav > li > a и .site-nav li a , ведь и там и там обращаемся к элементу внутри других элементов
2. Нужно ли писать доп.строки кода для Internet Explorer? Насколько знаю, им пользуется мизерное число пользователей. Поправьте, если ошибаюсь
3. В позапрошлом уроке вы рекомендовали px использовать для границ и отступов, em - для остальных свойств, но здесь вы именно em используете для отступов. Получается, рекомендация носит не особо строгий характер и что будет, если не пользоваться ей в реальной практике?
В CSS селекторах есть разница между .site-nav > li > a и .site-nav li a.
.site-nav > li > a означает выбор элемента , который является прямым потомком элемента , который в свою очередь является прямым потомком элемента с классом .site-nav. Это будет выбирать только ссылки, находящиеся на первом уровне вложенности в .site-nav.
.site-nav li a означает выбор любого элемента , который находится внутри элемента , который в свою очередь находится внутри элемента с классом .site-nav. Это будет выбирать все ссылки, независимо от уровня вложенности в .site-nav.
На текущий момент доля пользователей Internet Explorer (IE) значительно снизилась, и многие разработчики не поддерживают его полностью. Можно не писать...
Рекомендация использования px для границ и отступов, а em (или rem) для остальных свойств, является общей рекомендацией для достижения более гибкого и масштабируемого дизайна. Однако, это не строгое правило, и в реальной практике можно использовать различные единицы измерения в зависимости от ситуации.
@@andrievskii Большое спасибо вам за ответ!
Спасибо за то что стараетесь и все так разжевываете!
скажите а пользоваться ли emmet?или для обучения лучше без него?работать с ним лучше?
Здравствуйте. У меня назрел вопрос ( 14:30 ) - "Можно комбинировать свойства display и задавать дочерним элементам flex-контейнера другие display-свойства (в данном случае display: block;). Собственно, учитывая то, что свойство display в принципе не наследуется (так на htmlbook написано), прописав всем прямым потомкам "a" прямых потомков "li" класса site-nav (надеюсь правильно сформулировал) их свойства не изменились - блочные элементы выстраиваются в столбик, а не в строку. Но если удалить свойство flex у родительского контейнера, то все ссылки выстраиваются в столбик. Как это работает? Я, конечно, перечитаю полное руководство по flexbox'ам, но бегло пробежав по нему, я не увидел такого уточнения. Почему дав элементам блочные свойства во flex-контейнере, они продолжаю вести себя, как строчные?
(Обновлено): Я осознал в чём прикол.. Невнимательный я. мы задаём значение display: block; каждой ссылке, а не контейнеру с ссылками.
Спасибо! Всё понятно и работает! Лайк, подписка!
PS. Вконце, про сокращённую запись бы подробней - саму схему бы мне в конспект!
Тоже сижу все конспектирую ))))
А то с головы потом вылетает.
Здравствуй. Ты писал этот комментарий давно. Мне просто интересно, как у тебя успехи?
@@kzuralsk7533 Сменил 2 работы, устраиваюсь на 3-ю. По зп сильно не вырос, т.е. до 100... А если бы не менял работу, то не вырос бы и за 35...
Хотя полезным опытом эти 2 работы назвать трудно. Всем нужны миддлы, а их не было в то время свободных. Брали с минималом. Сейчас требования на джуна ППЦ. И всего 1-2 вакансии в городе... А джунов 2000.
@@Drezerak можно же не ограничиваться одним городом, разве не так? Поправь меня, если ошибаюсь
@@kzuralsk7533 Конечно можно! Можно и страной не ограничиваться... Только опыт где брать! Зачем европейцам брать джуна или Яндексу в Москве предлагать релокацию не опытному...
Чёта у меня взрыв мозга!))
Попробуй просто повторять за мной по коду, а потом внимательно просмотри верстку и стили. Не все сразу приходит, иногда нужно время.
@@andrievskii Да я так делаю.Сегодня опять по второму кругу пропустил видеоролик.Упущенное понял!Спасибо огромное!
Наоборот всё просто по сравнению с Float элементами в предыдущих версиях CSS... Вот там полный был пизец: колонки не доходили до конца стр., приходилось применять JQuery - а это лишние телодвижения... и многое др. А flex - это просто сахар и мёд!
PS. Возможно ты не изучил основы CSS... Евгений Попов даёт крутейший курс по основам...
спасибо за урок! с каждым разом становиться всё понятнее и понятнее! prnt.sc/10n2er3 это скрин дз. надеюсь я всё правильно сделал ( цвета плохие, но сейчас это не главное)
всё очень запутанно, так как сразу не разделил css комментариями и поэтому даже сам путался иногда. в следующий раз учту эту ошибку.
Document
магазин
каталог
помощь
контакты
тут что-то
um является стандартной "рыбой" для текстов на латинице
с начала XVI века. В то время некий безымянный печатник
создал больш
и тут что-то
но выяснено, что при оценке дизайна и композиции
читаемый текст мешает сосредоточиться. Lorem Ipsum
используют потому, что тот обеспечивает более или менее
стандартное заполнение шаблона, а также реальное
распределение букв и пробелов в абзацах, которое не
получается при простой дубликации "Здесь ваш текст..
Здесь ваш текст.. Здесь ваш текст.." Многие программы
электронной вёрстки и редакторы HTML используют Lorem
Ipsum в качестве текста по умолчанию, так
тут тоже что-то
или слова, которые даже отдалённо не напоминают латынь.
Если вам нужен Lorem Ipsum для серьёзного
регистрация
отправить
Самая большая база объявлений недвижимости в России - вывод
из результатов исследования ООО «Форейтор» в сентябре 2019
года. Данные о доле продаваемых на Авито квартир
представлены ООО «Акварель Ресёрч» в октябре 2020 года.
Данные о количестве посетителей разделов Недвижимости,
количестве просмотров, предложений и профессиональных
продавцов представлены на основании внутренней аналитики
Авито на август 2020 года.
/* css */
body {
max-width: 1200px;
margin: 0 auto;
}
header,
footer {
height: 150px;
background: rgb(219, 181, 181);
}
section {
height: 880px;
display: flex;
}
.left,
.rigt {
flex: 1;
background: rgb(161, 94, 94);
}
.centr {
flex: 2;
background: rgb(241, 229, 229);
box-sizing: border-box;
padding: 0 30px 0 30px;
}
/* меню */
.ul1 {
display: flex;
list-style-type: none;
padding: 0;
}
.ul1 li {
background: rgb(41, 152, 156);
border-radius: 5px;
padding: 20px;
}
nav {
margin: 0;
}
.ul1 li a {
text-decoration: none;
color: #fff;
font-size: 20px;
}
header {
padding: 25px 50px 0 50px;
box-sizing: border-box;
}
.ul1 li + li {
margin-left: 38px;
}
.ul1 .lastli {
margin-left: auto;
}
.divtop,
.divbottow {
min-height: 15%;
}
.divcenter {
min-height: 70%;
}
h1,
h2,
h3 {
margin: 0;
text-align: center;
}
.botconticyl p {
font-size: 15px;
color: rgb(88, 88, 88);
margin: 0;
}
.botconticyl {
padding: 10px 50px 0 50px;
}
.centr p {
margin: 0;
font-size: 1em;
}
/* правое меню */
.ul2 {
list-style-type: none;
margin: 0;
padding: 20px 0 0 20px;
}
.ul2 li input {
padding: 10px;
border-radius: 5px;
background: #ccc;
}
.reg {
font-size: 25px;
text-align: center;
padding: 0 45px 0 0;
margin-bottom: 20px;
}
.ul2 li + li {
margin-top: 10px;
}
.ul2 li button {
padding: 7px;
background: #ccc;
border-radius: 5px;
cursor: pointer;
}
@@versti8996 Здравствуй. Ты писал этот комментарий давно. Мне просто интересно, как у тебя успехи?
здравствуйте,Андрей,все понятно,.Почему нельзя просто параграфы форматировать как блоки?
Здравствуйте Андрей. Спасибо вам за уроки, мне интересно, какой скриншотер вы используете?
lightshot
Вот держите товарищи сам думал около 3 часов !!
И да я знаю не полностью получилось по макету, но вы можете сделать как вам угодно спасибо за внимание!!!
(HTML)
Flexbox homework
Lorem ipsum dolor sit amet. Qui ad minima veniam quis. Sapiente delectus, ut enim ipsam. Iusto odio dignissimos ducimus, qui in ea commodi autem. Adipisci velit, sed ut et voluptates repudiandae. Iste natus error sit voluptatem. Soluta nobis est eligendi optio, cumque nihil molestiae. Sequi nesciunt, neque porro quisquam est, omnis voluptas nulla. In ea voluptate velit esse quam. Eveniet, ut perspiciatis, unde omnis iste natus error sit voluptatem.Lorem ipsum dolor sit amet. Qui ad minima veniam quis. Sapiente delectus, ut enim ipsam. Iusto odio dignissimos ducimus, qui in ea commodi autem. Adipisci velit, sed ut et voluptates repudiandae. Iste natus error sit voluptatem. Soluta nobis est eligendi optio, cumque nihil molestiae. Sequi nesciunt, neque porro quisquam est, omnis voluptas nulla. In ea voluptate velit esse quam. Eveniet, ut perspiciatis, unde omnis iste natus error sit voluptatem.
Lorem ipsum dolor sit amet. Qui ad minima veniam quis. Sapiente delectus, ut enim ipsam. Iusto odio dignissimos ducimus, qui in ea commodi autem. Adipisci velit, sed ut et voluptates repudiandae. Iste natus error sit voluptatem. Soluta nobis est eligendi optio, cumque nihil molestiae. Sequi nesciunt, neque porro quisquam est, omnis voluptas nulla. In ea voluptate velit esse quam. Eveniet, ut perspiciatis, unde omnis iste natus error sit voluptatem.Lorem ipsum dolor sit amet. Qui ad minima veniam quis. Sapiente delectus, ut enim ipsam. Iusto odio dignissimos ducimus, qui in ea commodi autem. Adipisci velit, sed ut et voluptates repudiandae. Iste natus error sit voluptatem. Soluta nobis est eligendi optio, cumque nihil molestiae. Sequi nesciunt, neque porro quisquam est, omnis voluptas nulla. In ea voluptate velit esse quam. Eveniet, ut perspiciatis, unde omnis iste natus error sit voluptatem.
Lorem ipsum dolor sit amet. Qui ad minima veniam quis. Sapiente delectus, ut enim ipsam. Iusto odio dignissimos ducimus, qui in ea commodi autem. Adipisci velit, sed ut et voluptates repudiandae. Iste natus error sit voluptatem. Soluta nobis est eligendi optio, cumque nihil molestiae. Sequi nesciunt, neque porro quisquam est, omnis voluptas nulla. In ea voluptate velit esse quam. Eveniet, ut perspiciatis, unde omnis iste natus error sit voluptatem.Lorem ipsum dolor sit amet. Qui ad minima veniam quis. Sapiente delectus, ut enim ipsam. Iusto odio dignissimos ducimus, qui in ea commodi autem. Adipisci velit, sed ut et voluptates repudiandae. Iste natus error sit voluptatem. Soluta nobis est eligendi optio, cumque nihil molestiae. Sequi nesciunt, neque porro quisquam est, omnis voluptas nulla. In ea voluptate velit esse quam. Eveniet, ut perspiciatis, unde omnis iste natus error sit voluptatem.
Lorem ipsum dolor sit amet. Qui ad minima veniam quis. Sapiente delectus, ut enim ipsam. Iusto odio dignissimos ducimus, qui in ea commodi autem. Adipisci velit, sed ut et voluptates repudiandae. Iste natus error sit voluptatem. Soluta nobis est eligendi optio, cumque nihil molestiae. Sequi nesciunt, neque porro quisquam est, omnis voluptas nulla. In ea voluptate velit esse quam. Eveniet, ut perspiciatis, unde omnis iste natus error sit voluptatem.Lorem ipsum dolor sit amet. Qui ad minima veniam quis. Sapiente delectus, ut enim ipsam. Iusto odio dignissimos ducimus, qui in ea commodi autem. Adipisci velit, sed ut et voluptates repudiandae. Iste natus error sit voluptatem. Soluta nobis est eligendi optio, cumque nihil molestiae. Sequi nesciunt, neque porro quisquam est, omnis voluptas nulla. In ea voluptate velit esse quam. Eveniet, ut perspiciatis, unde omnis iste natus error sit voluptatem.
Lorem ipsum dolor sit amet. Qui ad minima veniam quis. Sapiente delectus, ut enim ipsam. Iusto odio dignissimos ducimus, qui in ea commodi autem. Adipisci velit, sed ut et voluptates repudiandae. Iste natus error sit voluptatem. Soluta nobis est eligendi optio, cumque nihil molestiae. Sequi nesciunt, neque porro quisquam est, omnis voluptas nulla. In ea voluptate velit esse quam. Eveniet, ut perspiciatis, unde omnis iste natus error sit voluptatem.Lorem ipsum dolor sit amet. Qui ad minima veniam quis. Sapiente delectus, ut enim ipsam. Iusto odio dignissimos ducimus, qui in ea commodi autem. Adipisci velit, sed ut et voluptates repudiandae. Iste natus error sit voluptatem. Soluta nobis est eligendi optio, cumque nihil molestiae. Sequi nesciunt, neque porro quisquam est, omnis voluptas nulla. In ea voluptate velit esse quam. Eveniet, ut perspiciatis, unde omnis iste natus error sit voluptatem.
Lorem ipsum dolor sit amet. Qui ad minima veniam quis. Sapiente delectus, ut enim ipsam. Iusto odio dignissimos ducimus, qui in ea commodi autem. Adipisci velit, sed ut et voluptates repudiandae. Iste natus error sit voluptatem. Soluta nobis est eligendi optio, cumque nihil molestiae. Sequi nesciunt, neque porro quisquam est, omnis voluptas nulla. In ea voluptate velit esse quam. Eveniet, ut perspiciatis, unde omnis iste natus error sit voluptatem.Lorem ipsum dolor sit amet. Qui ad minima veniam quis. Sapiente delectus, ut enim ipsam. Iusto odio dignissimos ducimus, qui in ea commodi autem. Adipisci velit, sed ut et voluptates repudiandae. Iste natus error sit voluptatem. Soluta nobis est eligendi optio, cumque nihil molestiae. Sequi nesciunt, neque porro quisquam est, omnis voluptas nulla. In ea voluptate velit esse quam. Eveniet, ut perspiciatis, unde omnis iste natus error sit voluptatem.
Lorem ipsum dolor sit amet. Qui ad minima veniam quis. Sapiente delectus, ut enim ipsam. Iusto odio dignissimos ducimus, qui in ea commodi autem. Adipisci velit, sed ut et voluptates repudiandae. Iste natus error sit voluptatem. Soluta nobis est eligendi optio, cumque nihil molestiae. Sequi nesciunt, neque porro quisquam est, omnis voluptas nulla. In ea voluptate velit esse quam. Eveniet, ut perspiciatis, unde omnis iste natus error sit voluptatem.Lorem ipsum dolor sit amet. Qui ad minima veniam quis. Sapiente delectus, ut enim ipsam. Iusto odio dignissimos ducimus, qui in ea commodi autem. Adipisci velit, sed ut et voluptates repudiandae. Iste natus error sit voluptatem. Soluta nobis est eligendi optio, cumque nihil molestiae. Sequi nesciunt, neque porro quisquam est, omnis voluptas nulla. In ea voluptate velit esse quam. Eveniet, ut perspiciatis, unde omnis iste natus error sit voluptatem.
Lorem ipsum dolor sit amet. Qui ad minima veniam quis. Sapiente delectus, ut enim ipsam. Iusto odio dignissimos ducimus, qui in ea commodi autem. Adipisci velit, sed ut et voluptates repudiandae. Iste natus error sit voluptatem. Soluta nobis est eligendi optio, cumque nihil molestiae. Sequi nesciunt, neque porro quisquam est, omnis voluptas nulla. In ea voluptate velit esse quam. Eveniet, ut perspiciatis, unde omnis iste natus error sit voluptatem.Lorem ipsum dolor sit amet. Qui ad minima veniam quis. Sapiente delectus, ut enim ipsam. Iusto odio dignissimos ducimus, qui in ea commodi autem. Adipisci velit, sed ut et voluptates repudiandae. Iste natus error sit voluptatem. Soluta nobis est eligendi optio, cumque nihil molestiae. Sequi nesciunt, neque porro quisquam est, omnis voluptas nulla. In ea voluptate velit esse quam. Eveniet, ut perspiciatis, unde omnis iste natus error sit voluptatem.
(CSS)
body{
width: 1200px;
margin: 0 auto;
}
.box1{
border: 3px solid red;
padding: 1em;
}
main{
display: flex;
margin-top: .5em;
}
main > aside{
flex-direction: column;
border: 3px solid blue;
max-width: 200px;
padding: 1em;
}
.box2{
flex-wrap: wrap;
border: 3px solid #000;
padding: 1em;
margin-left: 0.5em;
margin-right: 0.5em;
}
.box3{
border: 3px solid red;
padding: 1em;
display: flex;
margin-top: .5em;
}
Андрей, можешь скинуть ссылку на свои уроки по html, css, JavaScript, react(если есть), чтобы смотреть структурировано
Я так понимаю что личку не может быть разговора. Подскажи пожалуйста тогда, как я могу начать верстать даже простые макеты если мне пробовали их верстку с фотошопа. С чего начинать не знаю и где макеты брать тоже не знаю.Еще я не понял почему ты в коде перестал писать и ?
Можно вместо комбинирования использовать и к ссылкам display:flex. Они же тоже получат. Статус блочных
Можно
flex-shrink, флекс-шринк ))
Здравствуйте! Где можно прочитать о Flexbox верстке?
1. developer.mozilla.org/ru/docs/Learn/CSS/CSS_layout/Flexbox
2. html5book.ru/css3-flexbox
А почему у вас нету открывающего и закрывающего тега html?
Современные браузеры понимают и без него. Но лучше ставить
Уже 2 часа сижу с этой таблицей в попытках ее сделать. Можете посмеяться с меня, товарищи программисты. Типо пытаюсь сделать ДЗ ))))
У меня получилось сделать домашку только после того, как прошел следующий урок. Сделал с помощью flex-direction: column; и flex-wrap: wrap;
@@usatborodat Илья подскажи пожалуйста как ты сделал центральную часть макета в домашке, левые и правая панель это у тебя строки или колонки?
@@densolovyev левая и правая-строки, центральная колонка
@@usatborodat а у меня после следующего еще больший ступор!!!! Для меня флекс оказался непонятен. Мне флоат дался не с первого раза, я пару дней помучился, но понял, а флекс какой то кошмар оказался. Прямо в отчаянии...Перечитываю, пересматриваю в который раз и никакого прорыва.
Здравствуйте! Пожалуйста, сбросьте, кто может, код выполненного домашнего задания. У меня полнейшее непонимание.
flexbox homework
Верхний колонтитул
левая панель
Начало тела
Тело
Окончание тела
Правая панель
Нижний колонтитул
как верстать домашку если не указаны размеры
Так укажите сами. Свои задайте, на глаз ))
Самообучаюсь верстке месяца три, верстаю самостоятельно всего около месяца, ни единого проекта без флексов, адаптирую, пробую опенкарт с вордпрессом, и тут "для профи"... мне это, конечно, льстит, но флексы с гридами - это самое обязательное знание самого нулевого новичка, коим я и являюсь. Насколько я понял - неплохое знание html/css (без подглядывания в шпаргалку), какие-то слайдеры с настройкой, базовые способы JQ, это еще дно днищенское, это знание новенького новичка, или мне уже пора пробовать искать работу?
Здравствуй. Ты писал этот комментарий давно. Мне просто интересно, как у тебя успехи?
включил видос на х2 и с 33:30 чуть не помер со смеху
Кто нибудь сверстал тот макет из домашнего задания с помощью Flex?
Я совсем не могу сделать домашку. Блоки создал, дивы создал, а как их теперь позиционировать как по макету совсем не понятно.Жесть.
вы перепутали все значения местами !!!
flex: 1 1 20em, что в обычном виде означает flex-grow:1, flex-shrink:1, flex-basis: 20em.
хорошо перечитывайте прежде чем записывать видео !!!!!!