Адаптивность — одно из ключевых требований, предъявляемых к современным сайтам. Ресурс должен одинаково хорошо демонстрироваться на экране компьютера, планшете, смартфоне. Для этого создается адаптивный дизайн и используется адаптивная верстка.
Сегодня около половины пользователей посещают сайты используя гаджеты — смартфоны, планшеты. Это удобно, ведь можно серфить по сети, находясь в любой точке пространства, где есть интернет — лежа в кровати, на улице, в транспорте. Мобильная аудитория постоянно растет, и игнорировать ее потребности нельзя. Вот почему разработчики адаптируют сайты под портативные устройства.
Верстальщики длительный период времени применяли для создания нужного расположения контента на странице float-элементы, таблицы и другую конструктивную помощь, представленную свойствами CSS, однако для более сложных приложений подобных инструментов будет недостаточно. Гибкий flex-контейнер дает возможность пользователю корректировать высоту/ширину объектов с целью оптимального их размещения на странице, для того чтобы избежать возникновения overflow.
Flexbox – это целый набор CSS свойств, часть из которых применяются непосредственно к контейнеру (flex container), а часть — к его дочерним элементам (flex items).
Представляю вашему вниманию две моих работы по этой теме. В одной из них я только знакомился с flex-контейнерами, поэтому пришлось использовать медиа запросы. Во второй работе медиа запросы не спользовались, только флексы.