Чтобы объекты навигационной панели уменьшались при уменьшении ширины браузера, а не смещались, можно использовать медиа-запросы и CSS свойство flexbox
.
Вот пример кода, который позволит достичь такого эффекта:
<!DOCTYPE html> <html> <head> <style> .nav-container { display: flex; flex-wrap: wrap; } .nav-item { flex: 1 0 200px; min-width: 200px; max-width: 500px; height: 50px; background-color: #ccc; margin: 10px; } @media (max-width: 768px) { .nav-item { flex-basis: 100%; max-width: 100%; } } </style> </head> <body> <div class="nav-container"> <div class="nav-item"></div> <div class="nav-item"></div> <div class="nav-item"></div> <div class="nav-item"></div> </div> </body> </html>
В этом примере .nav-container
представляет собой контейнер для элементов навигационной панели. Устанавливаем ему свойство display: flex
, чтобы элементы располагались в одной строке. Свойство flex-wrap: wrap
позволяет строкам переноситься на новую строку при нехватке места.
.nav-item
- это элементы навигационной панели. Через flex: 1 0 200px
мы указываем, что элементы должны равномерно распределяться по контейнеру, занимая свободное пространство в соответствии с их шириной, которая равна 200 пикселей. Свойство min-width
и max-width
управляют минимальной и максимальной шириной элементов.
В медиа-запросе @media (max-width: 768px)
мы переопределяем свойство flex-basis
элементов навигационной панели, устанавливая его в 100% и max-width
в 100%, чтобы элементы занимали всю доступную ширину на устройствах с максимальной шириной 768 пикселей.
Таким образом, при уменьшении ширины браузера, элементы навигационной панели будут уменьшаться в размерах, а при недостатке места, они будут автоматически переноситься на новую строку.