align-items flexbox css / верстка в флексбокс / flexbox уроки

Подписаться 47 тыс.

Просмотров 7 тыс.

50% 1

align-items flexbox css / верстка в флексбокс / flexbox уроки
Привет! Сегодня мы рассмотрим свойство align-items из модуля flexbox. После просмотра этого видео вы будете знать, как работает это свойство, какие значения оно может принимать. верстка сайта состоит из блоков, которые должны должны выравниваться по разным границам. Иногда высота шапки бывает большой, но при этом требуется, чтобы логотип и навигация располагались по нижней границе, либо же это может быть список карточек продуктов, которые должны быть одинаковой высоты. Всё это легко решается с различными значениями свойства align-items
В это видео мы рассмотрим значения свойства align-items, а именно: stretch, flex-start, flex-end, center, baseline, self-start, self-end
flexbox уроки позволят вам лучше понять то, как работает флексбокс

Опубликовано:

27 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 41

@prosto_razrabotka 3 года назад

Не забудьте заглянуть сюда: ❓ Запись на консультацию - prosto-razrabotka.ru/ ✨ Telegram канал - t.me/prostorazrabotka/ 🔥 Telegram чат - t.me/prostorazrabotkachat/ Можете добавиться в друзья: 📷 Instagram - instagram.com/vitaliy.kirenkov/ 📘 ВКонтакте - vk.com/vitaliy.kirenkov/ 📗 Facebook - facebook.com/vitaliy.kirenkov/ 📙 LinkedIn - www.linkedin.com/in/kirenkov/ ✏️ Twitter - twitter.com/VitaliyKirenkov/ А так же, подписаться на страницы: 📘 ВКонтакте - vk.com/public195137161/ 📗 Facebook - facebook.com/prostorazrabotka/

@prosto_razrabotka 5 лет назад

Как вам серия видео про детальный разбор свойств Flexbox? Она плавно подходит к концу. Осталось 2 свойства, которые мы ещё не рассмотрели.

@justspartak 5 лет назад

Изумительно!

@ЭдуардЛутков 5 лет назад

Очень полезное видео. Наглядность всегда продуктивнее текста.

@Nikitosss91 5 лет назад

Виталий, спасибо за контент. Вставлю свои 5 копеек. Про свойства это все конечно хорошо, но это можно почитать самому. Что самому не почитать, так это про реальную верстку. Я был бы Вам крайне признателен, если бы у Вас чаще выходили видео непосредственно с версткой макетов разных типов, и сложностей, максимально приближенной, так сказать к боевым условиям. Спасибо.

@ЭдуардЛутков 5 лет назад

Я встречал не некоторых блогах соревнования по верстке. Тут тоже можно их проводить, а после разбирать самые интересные моменты. Можно чередовать верстки по препроцессорам css, scss, less и sass. Так многие натаскаются по практике.

@ДмитрийМорозов-м7ы 5 лет назад

Виталий, ты красавчик, как всегда просто, понятно и без мусора!! Огонь!!!

@kalukum_a 5 лет назад

Вы ошиблись: свойство align-items, так же как и align-content, работает относительно второстепенной оси

@ИльяЛекомцев-п4б 5 лет назад

Удивляюсь, как при ваших знаниях и опыте, можно так доступно доносить информацию. Лайк однозначно)

@prosto_razrabotka 5 лет назад

Знание и опыт..))

@shalamnik77 5 лет назад

Пришел с канала АйТиБороды, Видео действительно качественные и по делу, как сказали в интервью, респект!

@ИгорьГорбунов-ю9ж 4 года назад

Благодарю Вас за видео.

@justspartak 5 лет назад

Про значение baseline как-то позабыл. Спасибо! И за пример тоже. Иногда, крайне пригодится.

@prosto_razrabotka 5 лет назад

Не за что -)

@TheTexPro 5 лет назад

Спасибо!

@amirych 5 лет назад

Здравствуйте! Почему в девтулс указаны эти значения? align-items: baseline; align-items: center; align-items: end; align-items: first baseline; align-items: flex-end; align-items: flex-start; align-items: inherit; align-items: initial; align-items: last baseline; align-items: normal; align-items: revert; align-items: safe; align-items: self-end; align-items: self-start; align-items: start; align-items: stretch; align-items: unsafe; align-items: unset;