Продолжаем с основами flexbox. Следующее, что нужно рассмотреть, — это то, как справиться с этой ситуацией на мобильных устройствах, потому что, хотя 10 (или 12) столбцов могут быть хороши на сайте для настольных компьютеров, они, вероятно, не будут работать на мобильном сайте.
Давайте добавим пару медиа-запросов в css, чтобы справиться с этим.
Давайте начнем с этого, но переключим наш текущий css на менталитет mobile first. Mobile first означает, что мы сначала разрабатываем css для мобильных устройств, а затем используем медиа-запросы, чтобы модифицировать его для больших экранов. Преимущество этого заключается в том, что страницы загружаются немного быстрее на мобильных устройствах.
Имея это в виду, на мобильном устройстве мы хотим, чтобы flexbox делал каждый столбец полной ширины.
.column { flex:1; min-width:100%; max-width:100%; }
Так что это выглядит так, как будто мы вообще не использовали flexbox. Мы все еще есть. Теперь давайте добавим медиа-запрос для больших экранов, чтобы вернуть наши столбцы.
@media only screen and (min-width: 768px) { .column { flex:1; min-width:10%; max-width:10%; } }
Используя медиа-запрос, мы переопределяем класс столбца для устройств с шириной экрана более 768 пикселей. Это приводит к тому, что наш макет flexbox снова расширяется до столбцов, как это было раньше.
Однако разница теперь заключается в том, что если вы измените размер окна браузера, чтобы он был маленьким, как мобильный телефон, макет автоматически изменится обратно на полную ширину и со столбцами, которые выглядят как стандартные элементы div.
Очевидно, что вы можете настроить это в соответствии с вашими потребностями. Например, ваш мобильный интерфейс вполне может использовать два столбца вместо столбцов полной ширины.
В будущем мы расширим этот очень простой макет flexbox до более полезного и попытаемся создать базовую библиотеку макетов flexbox, которую вы могли бы использовать в любом проекте.
Обратите внимание:изменив это сейчас, чтобы быть сначала для мобильных устройств, вы должны помнить, что любые дополнительные изменения CSS должны быть внесены в первую очередь с учетом мобильных устройств. а затем изменен, чтобы соответствовать большим экранам внутри медиа-запроса.
Я вернусь и расширю эту тему, как только она будет упомянута, поэтому, если есть какие-либо вопросы, пожалуйста, оставьте комментарий, и я постараюсь ответить на них в следующем выпуске.
