Повозилась со всеми свойствами, что б сделать красоту, в итоге 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.
После нового свойства "object-fit" (22:25) никаких изменений не появляются и картинки не растягиваются.(как при значение у background-size:cover). Скачал все исходники с вашего гугла и они тоже не работают((( Может в 2020 году это свойство передалили) Не могу найти информацию, подскажите пожалуйста)
Если указывается одно числовое значение оно устанавливается для flex-grow (так и есть в нашем случае). flex-grow - Коэффициент растяжения. Коэффициент увеличения ширины флекс-элемента относительно других флекс-элементов. Мы дали значение (display: flex;) для всех figure. То есть они стали ФЛЕКСАМИ каждый из них и сто у них внутри. И теперь мы обращаемся к Img, входящим в эти flexы, говоря им сколько места занять в figure относительно других Img. Мы задали им "flex:1". То есть в каждом Флексе figure каждый элемент img займёт полую его область, так как больше нет конкурентов (img). Внутри каждого figure только 1 img.
Товарищ автор, я нашёл, что грид неспособен реализовать банальный макет из 2 блоков разной ширины, расположенных горизонтально, чтобы при сужении экрана второй переносился вниз. Скажите пожалуйста, это действительно непосильная для грида задача? Флекс решает её 3-5 строками кода.
В основном удобнее использовать Flex! Grid используйте в блоках сложной конструкции (для интересного дизайна, большей информативности блока и т.п.). Если вёрстка адаптивная, то желательно, чтобы информация в блоке Grid была читабельна на экране смартфона и блок не ломался. А лучше всего при адаптивной вёрстке сложных дизайнов не использовать. Хотите сложный дизайн? - делайте для смартфонов отдельный шаблон (к тому же для смартов диз вообще не важен - экран маленький).
Клас в исходниках на гугл диске (.pictures) не совпадают в теми класами что делаешь во время урока. Ошибка в букве. Не критично, просто замечание для таких как я, которые будут качать исходник)) Делал все за тобой, один в один, у меня не случилось обрезания картинок!!! У меня все отобразило как нужно! Ковер же за это должен был ответить, чтобы без обрезки (насколько я понимаю). Где-то у тебя была ошибка, но лень искать) Спс за урок! Бесценная инфа) drive.google.com/file/d/1UC-rBAftNsJYZ6EZBFJiaWXhhWkUDSCt/view?usp=sharing
@@videostudio5387 Может, поможет, это? Internet Explorer до версии 8.0 включительно игнорирует теги , , но отображает их содержимое. Также в этом браузере любые стили не применяются к элементу, пока он не создан через скрипт, как показано в примере. document.createElement('figure'); document.createElement('figcaption'); (Источник htmlbook.ru/html/figcaption)
Просмотри. не повторяя, просто пытаясь понять. что происходит. Потом пересмотри с повторение, и в конце попробуй самостоятельно что либо с пройденного повторить.
![[LIVE] : ONE ลุมพินี 87 วันนี้!! คู่เอก "ก้องชัย vs โชคปรีชา"](http://i.ytimg.com/vi/YN6e7HVnekw/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.
После нового свойства "object-fit" (22:25) никаких изменений не появляются и картинки не растягиваются.(как при значение у background-size:cover). Скачал все исходники с вашего гугла и они тоже не работают((( Может в 2020 году это свойство передалили) Не могу найти информацию, подскажите пожалуйста)
хмм, при изменении свойства max-width на max-height более менее сработало
@@СлаваКравченко-в5р все работает, ищи ошибку. Например, класы в исходниках не совпадают в теми класами что он делает во время урока. Ошибка в букве.
thanks
Ребята, не понял, зачем использовалось 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.
Товарищ автор, я нашёл, что грид неспособен реализовать банальный макет из 2 блоков разной ширины, расположенных горизонтально, чтобы при сужении экрана второй переносился вниз. Скажите пожалуйста, это действительно непосильная для грида задача? Флекс решает её 3-5 строками кода.
В основном удобнее использовать Flex!
Grid используйте в блоках сложной конструкции (для интересного дизайна, большей информативности блока и т.п.). Если вёрстка адаптивная, то желательно, чтобы информация в блоке Grid была читабельна на экране смартфона и блок не ломался.
А лучше всего при адаптивной вёрстке сложных дизайнов не использовать. Хотите сложный дизайн? - делайте для смартфонов отдельный шаблон (к тому же для смартов диз вообще не важен - экран маленький).
Спасибо за урок!)
как ты так выделять по-разному? (Тайм код 14:07 до 14:21)
ALT зажимай и кликай на места где хочешь что-то ввести
Клас в исходниках на гугл диске (.pictures) не совпадают в теми класами что делаешь во время урока. Ошибка в букве.
Не критично, просто замечание для таких как я, которые будут качать исходник))
Делал все за тобой, один в один, у меня не случилось обрезания картинок!!! У меня все отобразило как нужно! Ковер же за это должен был ответить, чтобы без обрезки (насколько я понимаю). Где-то у тебя была ошибка, но лень искать)
Спс за урок! Бесценная инфа)
drive.google.com/file/d/1UC-rBAftNsJYZ6EZBFJiaWXhhWkUDSCt/view?usp=sharing
Здравствуйте, скажите а как этот же 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)
киньте сылку где можно скачать css штоб установить на компютер его сибе
КеееееееееееееК
трудный урок, не совсем понял
Просмотри. не повторяя, просто пытаясь понять. что происходит. Потом пересмотри с повторение, и в конце попробуй самостоятельно что либо с пройденного повторить.