Grid и flex в одном документе | CSS для Профи
HTML-код
- Опубликовано: 14 май 2019
- ПОДДЕРЖАТЬ АВТОРА И КАНАЛ:
www.liqpay.ua/ru/checkout/car...
Webmoney:
Z166344793421
R369744777501
U871336351200
Телеграмм чат:
t.me/joinchat/FQXf-hN9LRuCosQ...
Бывают ситуации, когда ну очень уместно разместить верстку при помощи грид разметки, но не всегда элементы будут вести себя предсказуемо или даже иногда не делать то, чего мы ожидаем.
Для этого в некоторых особых случаях мы смешиваем гриды и флекс верстку в одном документе!
МАТЕРИАЛЫ УРОКА:
drive.google.com/open?id=1Nr_...
xsltdev.ru/css/grid-auto-flow/
developer.mozilla.org/ru/docs...
БАЗОВЫЙ КУРС ПО HTML & CSS:
• Знакомство с основным ...
![MURDER DRONES Series Finale [TRAILER]](http://i.ytimg.com/vi/p6mhC5Iatns/mqdefault.jpg)
Отличное видео!! Спасибо за труды!!!
Как по мне так Grid в разы лучше у меня усваивается, чем Flex.
Повозилась со всеми свойствами, что б сделать красоту, в итоге flex: 1 помог... оставила его напоследок, т.к. в этом уроке не поняла сей магии с ним, хотя на других примерах, когда блоки больше других в n-раз - все понятно. Оооох, что не понятно, надо запомнить, мб потом пойму ахахха
в любом случае, теперь разрешаю себе двигаться дальше по урокам Андрея ))
Отличный урок, спасибо!
Отличное видео. Спасибо
На часах 2:11. Я - /настолько рад и в то же время опечален, что не могу выбрать, какую эмоцию выпустить наружу/. Наконец я понял, как сделать эти дурацкие строки поменьше, чтобы не вылазила грамоздкая картинка.. Юху, что-ли.. Я устал. Почему это так сложно? Как я могу скинуть сюда пример выполнения домашнего задания, чтобы его раскритиковали к хренам собачьим? (Нет, правда, мне нужно узнать свои ошибки и какие-нибудь тонкости работы). Спасибо за урок.
ты выложи свою работу на хабр или stack overflow и там тебя как последнюю собаку иметь будут а если скажешь что это самая лучшая верстка то получишь не забываемый опыт
А ещё не работает грид внутри флекса. Если закомментить дисплей флекс, грид рабочий. Иначе все картинки в нём сбиваются в вертикаль. Думаю, как исправить, но мне уже кажется, что это несовместимость.
Спасибо за урок!)
Здравствуйте и спасибо за урок. Есть несколько вопросов.
Скажите, на практике как часто встречается:
1. Совместное употребление flex и grid
2. Употребление flex
Можно ли в принципе ограничиться grid ?
И ещё. Я повторял точь - в - точь за вами, но у меня получился совсем другой результат. В частности, свойство object-fit не сработало и блоки остались на том же месте. Скачал ваши материалы и там отображает так же, как и у меня. В чём может быть проблема?
Здравствуйте! Ответы на ваши вопросы:
Совместное употребление flex и grid: Это довольно распространенная практика. Grid и Flexbox предназначены для решения разных задач, и они могут дополнять друг друга. Grid лучше подходит для двухмерных макетов (колонки и строки), в то время как Flexbox лучше подходит для одномерных макетов (или колонки, или строки). Использование их вместе может позволить вам создавать более сложные и гибкие макеты.
Употребление flex: Flexbox является чрезвычайно распространенным инструментом для создания макетов в CSS. Он используется для создания макетов, которые должны адаптироваться к различным размерам экрана и различным размерам контента. Flexbox широко используется и является важным инструментом для любого разработчика веб-интерфейсов.
Можно ли в принципе ограничиться grid?: Да, можно использовать только grid, но это может быть не всегда оптимальным решением. Grid и Flexbox обладают своими уникальными возможностями, и каждый лучше подходит для определенных сценариев. В некоторых случаях использование Flexbox может быть проще или более эффективно, чем использование Grid.
thanks
Товарищ автор, я нашёл, что грид неспособен реализовать банальный макет из 2 блоков разной ширины, расположенных горизонтально, чтобы при сужении экрана второй переносился вниз. Скажите пожалуйста, это действительно непосильная для грида задача? Флекс решает её 3-5 строками кода.
В основном удобнее использовать Flex!
Grid используйте в блоках сложной конструкции (для интересного дизайна, большей информативности блока и т.п.). Если вёрстка адаптивная, то желательно, чтобы информация в блоке Grid была читабельна на экране смартфона и блок не ломался.
А лучше всего при адаптивной вёрстке сложных дизайнов не использовать. Хотите сложный дизайн? - делайте для смартфонов отдельный шаблон (к тому же для смартов диз вообще не важен - экран маленький).
После нового свойства "object-fit" (22:25) никаких изменений не появляются и картинки не растягиваются.(как при значение у background-size:cover). Скачал все исходники с вашего гугла и они тоже не работают((( Может в 2020 году это свойство передалили) Не могу найти информацию, подскажите пожалуйста)
хмм, при изменении свойства max-width на max-height более менее сработало
@@user-er6ce4il7o все работает, ищи ошибку. Например, класы в исходниках не совпадают в теми класами что он делает во время урока. Ошибка в букве.
Ребята, не понял, зачем использовалось flex:1;
Искал в Интернете, не могу найти, подскажите кто-то пожалуйста
flex Это сокращенная запись для flex-grow, flex-shrink и flex-basis
сокращение такое. Выше описано
Если указывается одно числовое значение оно устанавливается для flex-grow (так и есть в нашем случае).
flex-grow - Коэффициент растяжения. Коэффициент увеличения ширины флекс-элемента относительно других флекс-элементов.
Мы дали значение (display: flex;) для всех figure. То есть они стали ФЛЕКСАМИ каждый из них и сто у них внутри. И теперь мы обращаемся к Img, входящим в эти flexы, говоря им сколько места занять в figure относительно других Img. Мы задали им "flex:1". То есть в каждом Флексе figure каждый элемент img займёт полую его область, так как больше нет конкурентов (img). Внутри каждого figure только 1 img.
как ты так выделять по-разному? (Тайм код 14:07 до 14:21)
ALT зажимай и кликай на места где хочешь что-то ввести
киньте сылку где можно скачать css штоб установить на компютер его сибе
КеееееееееееееК
Здравствуйте, скажите а как этот же CSS код изменить чтоб работало в ие?
body {
background: #709709;
font-family: Arial, Helvetica, sans-serif;
}
.portfolio {
width: 900px;
margin: 0 auto;
display: -ms-grid;
-ms-grid-columns: 1fr, auto;
display: grid;
grid-template-columns: repeat(
auto-fill /* автоматическое заполнение сетки */,
minmax(200px, 1fr)
);
grid-auto-rows: 1fr;
grid-gap: 1em;
grid-auto-flow: dense; /* заполняет пустые квадраты */
}
.portfolio figure {
margin: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; /* по колонкам */
}
.portfolio img {
max-width: 100%;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-o-object-fit: cover;
object-fit: cover; /* обрезает изображение центрируя его */
}
.portfolio figcaption {
padding: 0.4em 1em;
background: #bbb;
color: #fff;
text-align: right;
}
.portfolio .big {
-ms-grid-row-span: 2;
grid-row: span 2;
-ms-grid-column-span: 2;
grid-column: span 2;
}
изменил так код но это не помогло(
Автор забил на своих подписчиков, попробуйте дописать:
pic: display: -ms-grid;
figure: display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
img: display: -ms-flexbox; -webkit-box-flex: 1;
-ms-flex: 1; -o-object-fit: cover;
big: -ms-grid-row-span: 2; -ms-grid-column-span: 2;
@@uixdigital3191 у автора работа
@@videostudio5387 Может, поможет, это? Internet Explorer до версии 8.0 включительно игнорирует теги , , но отображает их содержимое. Также в этом браузере любые стили не применяются к элементу, пока он не создан через скрипт, как показано в примере.
document.createElement('figure');
document.createElement('figcaption');
(Источник htmlbook.ru/html/figcaption)
Клас в исходниках на гугл диске (.pictures) не совпадают в теми класами что делаешь во время урока. Ошибка в букве.
Не критично, просто замечание для таких как я, которые будут качать исходник))
Делал все за тобой, один в один, у меня не случилось обрезания картинок!!! У меня все отобразило как нужно! Ковер же за это должен был ответить, чтобы без обрезки (насколько я понимаю). Где-то у тебя была ошибка, но лень искать)
Спс за урок! Бесценная инфа)
drive.google.com/file/d/1UC-rBAftNsJYZ6EZBFJiaWXhhWkUDSCt/view?usp=sharing
трудный урок, не совсем понял
Просмотри. не повторяя, просто пытаясь понять. что происходит. Потом пересмотри с повторение, и в конце попробуй самостоятельно что либо с пройденного повторить.