Главная->Уроки по css->Пример адаптивной верстки на flexbox (часть 2)

Пример адаптивной верстки на flexbox (часть 2)

08 Сен в 00:00

Пример адаптивной верстки на flexbox (#2) Мы получили заготовку, теперь можно убрать вспомогательный класс и задать серый цвет фона для container. .container { .. background-color: #f7f7f7; } Пример адаптивной верстки на flexbox. Дальше будем наполнять контентом наши блоки вместо чисел и стилизовать их, согласно макету. Добавим в каждую колонку один блок с иконкой и второй блок с текстом. Новым блокам зададим свои классы. <div class="advantages_col"> <div class="advantages_image"><img src="image_01.svg" alt=""></div> <div class="advantages_text">1. Недорогие цены на работы под ключ</div> </div> <div class="advantages_col"> <div class="advantages_image"><img src="image_02.svg" alt=""></div> <div class="advantages_text">2. Срок создания хорошего интернет-сайта — 1 день (не включая срок регистрации доменного имени)</div> </div> <div class="advantages_col"> <div class="advantages_image"><img src="image_03.svg" alt=""></div> <div class="advantages_text">3. Пакетные предложения по системе «все включено» (хостинг, регистрация домена, техническая поддержка)</div> </div> Теперь колонка одновременно является флексовым элементом и контейнером для новых блоков. .advantages_col { .. display: flex; align-items: center; } img { width: 49px; height: 49px; } .advantages_text { margin-left: 15px; } Осталось только стилизовать контент внутри блоков. body { font-size: 17px; color: #333; font-family: sans-serif; font-weight: 400; background: #f7f7f7; } И если на десктопе верстка выглядит очень хорошо. Пример адаптивной верстки на flexbox. А на планшете, ещё более-менее терпимо. Пример адаптивной верстки на flexbox. То на мобильных устройствах, уже совсем плохо. Совсем ничего не разобрать. Пример адаптивной верстки на flexbox. Делаем адаптив под мобильные устройства Добавляем в CSS файл медиа-запрос, который применится на экранах с разрешением меньшим, чем 768 пикселей. Нам нужно сделать глобальную перестановку - поменять направление главной оси, с row на column. Так, чтобы в ряду осталась только одна колонка. Также изменить базовую ширину у колонок, теперь они будут занимать 100% места в контейнере. И последнее, отделим колонки друг от друга нижними отступами. @media screen and (max-width: 768px) { .advantages_row { flex-direction: column; } .advantages_col { flex-basis: 100%; max-width: 100%; margin-bottom: 3%; margin-right: 3%; } } Пример адаптивной верстки на flexbox.