Научитесь кодировать адаптивную навигационную панель с помощью CSS Flexbox

1660251624 nauchites kodirovat adaptivnuyu navigaczionnuyu panel s pomoshhyu css

В этой статье я объясню, как создать панель навигации, которая адаптируется к разным размерам экрана, используя Flexbox вместе с медиа-запросами.

Это руководство также можно найти как интерактивный скринкаст в моем бесплатном курсе Flexbox на Scrimba.

Чтобы узнать больше о курсе, просмотрите статью.

Настройка

Начнём с разметки для очень простой навигационной панели:

<nav>  
  <ul class="container">  
    <li>Home</li>  
    <li>Profile</li>  
    <li class="search">  
      <input type="text" class="search-input" placeholder="Search">  
    </li>  
    <li>Logout</li>  
  </ul>  
</nav>

The <ul> элементом является наш гибкий контейнер и <li> элементы являются нашими гибкими элементами. Чтобы превратить его в макет Flexbox, мы сделаем:

.container {  
  display: flex;  
}

Что приведет к следующему макету:

Я добавил некоторые стили, но это не имеет ничего общего с Flexbox.

Я добавил некоторые стили, но это не имеет ничего общего с Flexbox.

Как видите, у нас есть немного дополнительного места с правой стороны. Это объясняется тем, что Flexbox размещает элементы слева направо и каждый элемент имеет такую ​​ширину, какой требует его содержимое.

Поскольку flex-контейнер по умолчанию является элементом уровня блока (и шире четырех элементов), мы получаем разрыв в конце.

Причина, почему элементы поиска шире других, состоит в том, что для полей ввода по умолчанию установлены size="20"какие разные браузеры и операционные системы интерпретируют по-разному.

Отзывчивость №1

Чтобы предоставить нашей панели навигации базовую чувствительность, мы просто предоставим элементу поиска значение flex 1.

.search {  
  flex: 1;  
}

Это приводит к тому, что поисковик расширяется и сужается вместе с шириной контейнера, то есть мы не получим дополнительное пространство в правой части.

1*BZnmPAc4fNPNGkjCPS22kw

Хотя имеет смысл увеличить поисковик, а остальные остаются фиксированными, вы можете отрицать, что он может стать слишком широким по сравнению с другими. Итак, если вы предпочитаете, чтобы все элементы росли вместе с шириной контейнера, вы можете просто предоставить всем элементам a flex значение 1.

.container > li {  
  flex: 1;  
}

Вот как это происходит:

1*pXzuCWHyvuyQ3JZQPoWclA

Вы также можете придать предметам разные значения гибкости, что заставит их расти с разной скоростью. Не стесняйтесь экспериментировать с этим на этой площадке Scrimba.

В остальном учебнике мы продолжим с первым решением, где элементы поиска являются единственными из flex значение.

Отзывчивость №2

Наша навигационная панель хорошо работает на широких экранах. Однако на более узких появляются проблемы, как вы видите здесь:

1*PCmf5iZCXLYIckEjMBbv4g

В какой-то момент невозможно иметь все элементы в одной строке, поскольку контейнер становится слишком узким. Чтобы решить эту проблему, мы добавим медиа-запрос, в котором разделим четыре элемента на две строки. Медиа-запрос сработает, когда ширина экрана достигнет 600 пикселей.

@media all and (max-width: 600px) {  
    
  .container {  
    flex-wrap: wrap;  
  }  
    
  .container > li {  
    flex-basis: 50%;  
  }

}

Во-первых, мы разрешаем обертывать макет Flexbox flex-wrap. По умолчанию установлено значение nowrapпоэтому нам придется сменить его на wrap.

Следующее, что мы делаем, это устанавливаем элементы flex-basis значение до 50%. Это сообщает Flexbox сделать так, чтобы каждый элемент занимал 50% доступной ширины, что приводит к двум элементам на строчку, вот так:

Примечание: я также выровнял текст заполнителя в поле поиска по центру.

Примечание: я также выровнял текст заполнителя в поле поиска по центру.

Сейчас мы имеем два разных государства. Однако этот макет все еще не работает на очень маленьких экранах, например, на экранах мобильных телефонов в портретном режиме.

Если мы продолжаем уменьшать экран, он будет похож на изображение ниже.

1*k_HzX7UVF152TVc1sfbhKg

Здесь произошло то, что вторая строчка больше не может вместить два предмета.

Элементы выхода и поиска просто слишком широкие, поскольку вы не можете уменьшить их до минимальной ширины, которая является шириной, необходимой для заполнения содержимого в них.

Элементы дома и профиля все еще могут отображаться в одной строке, поэтому Flexbox позволит им это делать. Это не оптимально, поскольку мы хотим, чтобы все наши строки вели себя одинаково.

Отзывчивость №3

Так как только один строк не может вместить два элемента по ширине, которую мы хотим нету рядов, чтобы иметь два пункта в ширину. Другими словами, на очень небольших экранах мы практически сделаем панель навигации вертикальной. Мы будем складывать предметы друг на друга.

Чтобы достичь этого, нам просто нужно изменить 50% ширины на 100%, чтобы каждая строка содержала только один элемент. Мы добавим эту точку остановки на 400px.

@media all and (max-width: 400px) {  
  .container > li {  
    flex-basis: 100%;  
  }  
  .search {  
    order: 1;  
  }  
}

Вдобавок к этому, я хотел бы разместить элемент поиска внизу, поэтому я также ориентируюсь на поиск и даю ему order значение 1.

Это приводит к следующему:

1*6Xgs5YcKu9Obq3dgk4qLZA

Причина order: 1; приводит к тому, что элемент поиска размещается внизу, так как элементы flex по умолчанию имеют нулевое значение и любой элемент, имеющий выше значение, будет размещен после других.

Чтобы увидеть, как это все происходит, вот gif в верхней части статьи:

1*CZikqoB4iZIIrV_rAW_qdg

Поздравляю! Теперь вы знаете, как создать полностью адаптивную навигационную панель с помощью Flexbox и медиа-запросов.

Если вам интересно узнать больше о Flexbox, я бы рекомендовал вам просмотреть мой бесплатный курс на Scrimba.

Спасибо за чтение! Меня зовут Пер Борген, я соучредитель Scrimba – самый легкий способ научиться кодировать. Если вы хотите научиться создавать современные веб-сайты на профессиональном уровне, посетите наш курс адаптивного веб-дизайна.

буткемп-баннер
Щелкните здесь, чтобы попасть в тренинг для углубленного обучения.

Добавить комментарий

Ваш адрес email не будет опубликован.