CSS / JS / Jquery - Flex элементы для адаптивных размеров экрана

Question

У меня есть сайт с 3 элементами в навигации, который я хочу оставить в одной строке.

• Первое - это главное меню, которое содержит основные ссылки на сайт и должно быть слева отпанель навигации.
• Вторая - это контактная информация, которая должна располагаться по центру на панели навигации.
• Третье - это меню авторизации, в котором есть ссылки для входа / учетной записи и т. д.справа от навигационной панели.

#nav{
  height:50px;
  width:100%;
  position:relative;
  display:flex; 
}
ul{
  display:inline-block;
  height:50px;
  line-height:50px;
  list-style:none;
}
li{
  display:inline-block;
}
#main_menu{
  flex:3;
  text-align:left;
}
#header_numbers{
  flex:4;
  text-align:center;
}
#auth_menu{
  flex:3;
  text-align:right;
}

<div id="nav">
<ul id="main_menu">
  <li>menu item 1</li>
  <li>menu item 2</li>
  <li>menu item 3</li>
</ul>
<ul id="header_numbers">
  <li>menu item 1</li>
  <li>menu item 2</li>
</ul>
<ul id="auth_menu">
  <li>menu item 1</li>
  <li>menu item 2</li>
  <li>menu item 3</li>
</ul>
</div>

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

Я не уверен, есть ли способ достичь этого только с помощью CSS, если я не сделаю запрос, подобный @media only screen and (max-width: 500px), но яЯ бы предпочел просто свести эти запросы к минимуму для мобильных / настольных компьютеров, а не иметь дополнительные запросы разных размеров только для одного конкретного элемента.

Любая помощь или помощь в этом будет принята с благодарностью.

Answer 1

Вы описываете функциональность CSS Media Queries, но говорите, что не хотите их использовать:)

Вы всегда можете использовать JS, но он менее эффективен, чем медиазапросы

const maxWidth = 500;

document.addEventListener("DOMContentLoaded", () => {
    checkWidth();
});

window.addEventListener('resize', () => {
    checkWidth();
});

function checkWidth() {
    if(window.innerWidth < maxWidth) {
         // ...do somthing with the element
    }
}

Answer 2

В любом случае необходимо установить для свойства display значение none, в противном случае без медиазапроса невозможно скрыть что-либо на экране другого размера (в вашем случае - на экране меньшего размера).

Вы можете использовать: -

@media only screen and  (max-width: 540px) {
  #header_numbers{
    display: none;
  }
}

Answer 3

Если вы не хотите использовать медиа-запросы, вы можете использовать Javascript / jQuery, но я думаю, что вам лучше с медиа-запросами для этого.

Однако это решение jQuery, если вы предпочитаете:

Поместите обработчик событий в окно load и resize события, которые проверяют, равно ли окно с или равно 500. Если это условие истинно, то скрыть элемент #header_numbers, если он ложный, показать его .

$(window).on('load resize', function(){
  if($(window).width() <= 500) {
    $('#header_numbers').hide();
  }
  else {
    $('#header_numbers').show();
  }
  
  /* Alternative notation use what you prefer
  $(window).width() <= 500 ? $('#header_numbers').hide() : $('#header_numbers').show();
  */
});

#nav{
  height:50px;
  width:100%;
  position:relative;
  display:flex; 
}
ul{
  display:inline-block;
  height:50px;
  line-height:50px;
  list-style:none;
}
li{
  display:inline-block;
}
#main_menu{
  flex:3;
  text-align:left;
}
#header_numbers{
  flex:4;
  text-align:center;
}
#auth_menu{
  flex:3;
  text-align:right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav">
<ul id="main_menu">
  <li>menu item 1</li>
  <li>menu item 2</li>
  <li>menu item 3</li>
</ul>
<ul id="header_numbers">
  <li>menu item 1</li>
  <li>menu item 2</li>
</ul>
<ul id="auth_menu">
  <li>menu item 1</li>
  <li>menu item 2</li>
  <li>menu item 3</li>
</ul>
</div>

Answer 4

Как я знаю, медиа-запрос - это единственный способ применить стиль в соответствии с размером экрана в css ...

Например #header_numbers будет скрываться, когда окно браузера имеет ширину 600 пикселей илименьше:

@media only screen and (max-width: 600px) {
    #header_numbers{
        display: none;
    }
}