1. Flexbox — модель CSS для гибкого расположения элементов преимущественно вдоль одной оси. Свойство display: flex активирует эту модель. Свойство justify-content управляет распределением элементов по основной оси, а align-items — их выравниванием по поперечной оси. Flexbox часто используется для создания меню, панелей и групп элементов интерфейса.

2. Свойство flex-wrap определяет возможность переноса элементов на новую строку или колонку, когда они не помещаются в контейнер. Например, значение wrap разрешает перенос. Свойство gap задаёт расстояние между элементами. Дополнительно свойства flex-grow, flex-shrink и flex-basis управляют распределением свободного пространства и размерами элементов.

3. CSS Grid — модель компоновки, позволяющая размещать элементы по строкам и столбцам. Она подходит для создания двухмерных сеток, например каталога учебных курсов. Flexbox удобен для размещения элементов преимущественно по одной оси, а Grid — для управления строками и столбцами одновременно. В CSS Grid используются свойства grid-template-columns, grid-template-rows и gap.

4. Медиазапросы @media позволяют применять разные CSS-правила в зависимости от характеристик устройства или области просмотра. Например, при небольшой ширине экрана можно изменить количество столбцов, размеры текста или расположение меню. Это помогает сделать веб-страницу удобной для компьютеров, планшетов и смартфонов.

5. Для адаптивного дизайна используются относительные единицы измерения %, rem, vw, а также функции min(), max() и clamp(). Свойство max-width: 100% помогает изображениям не выходить за пределы контейнера. Адаптивность проверяют на узких и широких экранах, при увеличении текста и в разных ориентациях устройства. Важно убедиться, что меню доступно, текст читается, элементы не перекрываются и не появляется нежелательная горизонтальная прокрутка.