HTML необычная упаковка

Question

#menu {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	margin: 0 5px 0 5px;
	height: 30px;
	flex-wrap: wrap;
}

.menu_item {
	margin: 0 10px 0 10px;
}

.menu_item2 {
	margin: 0 10px 0 10px;
}

<div id="menu">
			<div class="menu_item"><a href="band.html">Band</a></div>
			<div class="menu_item2"><a href="band.html"><img class="socials" src="images/socials/facebook.png"></a></div>
			<div class="menu_item"><a href="band.html">Photos</a></div>
			<div class="menu_item2"><a href="band.html"><img class="socials" src="images/socials/instagram.png"></a></div>
			<div class="menu_item"><a href="band.html">Video</a></div>
			<div class="menu_item2"><a href="band.html"><img class="socials" src="images/socials/vk.png"></a></div>
			<div class="menu_item"><a href="band.html">Merch</a></div>
			<div class="menu_item2"><a href="band.html"><img class="socials" src="images/socials/youtube.png"></a></div>
			<div class="menu_item"><a href="band.html">Contacts</a></div>
		</div>

Можно ли поместить каждый второй элемент в флексе в следующий ряд?(Используйте заказы уже) У меня есть встроенное меню с 9 кнопками.2-й, 4-й, 6-й и 8-й элемент - это символ социальной сети.1, 3, 5, 7, 9 - это просто ссылки сайта.Знаете ли вы, как заставить их оставаться на разных строках, когда ширина экрана меньше ххх пикселей?Я пытался использовать "@media", но мне кажется, что мне нужно менять поля сторон каждые 5 пикселей, чтобы они оставались на местах, что невозможно сделать в течение долгого времени.Может быть, есть другой способ для этого.Пожалуйста, помогите.

Answer 1

Я собираюсь предположить, что ссылки на самом деле меняются, то есть «Band» будет ссылаться на что-то отличное от «Facebook».

Как уже упоминалось в комментарии, вы хотите делать это только при небольших размерах экрана, мы можем использовать медиа-запросы и CSS-сетку , чтобы получить хороший эффект здесь.Обратите внимание, что у CSS-сетки есть некоторые проблемы с совместимостью: https://caniuse.com/#feat=css-grid

#menu {

  align-items: center;
  margin: 0 5px 0 5px;
  height: 30px;
  /*The Default grid*/
  display:grid;
  grid-template-columns: repeat(9, 1fr);
}

#menu a {justify-self: center;}


/*For Smaller screen sizes*/
@media screen and (max-width:800px)
{
  #menu {
   grid-template-columns: repeat(5, 1fr);    
   grid-template-rows: 1fr 1fr;
  }
  
  /*Set the social links to be on row 2*/
  #menu .social {
    grid-row-start:2;
  }
  
  
}

<div id="menu">
  <a href="band.html">Band</a>
  <a href="band.html" class="social"><img class="socials" src="images/socials/facebook.png"></a>
  <a href="band.html">Photos</a>
  <a href="band.html" class="social"><img class="socials" src="images/socials/instagram.png"></a>
  <a href="band.html">Video</a>
  <a href="band.html" class="social"><img class="socials" src="images/socials/vk.png"></a>
  <a href="band.html">Merch</a>
  <a href="band.html" class="social"><img class="socials" src="images/socials/youtube.png"></a>
  <a href="band.html">Contacts</a>
</div>

В демоверсии нажмите ссылку «Полная страница», чтобы увидеть большую сетку экрана в действии.

Answer 2

Попробуйте это:

<div id="menu">
    <div class="nav">
        <div class="menu_item"><a href="band.html">Band</a></div>
        <div class="menu_item"><a href="band.html">Photos</a></div>
        <div class="menu_item"><a href="band.html">Video</a></div>
        <div class="menu_item"><a href="band.html">Merch</a></div>
        <div class="menu_item"><a href="band.html">Contacts</a></div>
    </div>

    <div class="social">
        <div class="menu_item2"><a href="band.html"><img class="socials" src="images/socials/facebook.png"></a></div>
        <div class="menu_item2"><a href="band.html"><img class="socials" src="images/socials/instagram.png"></a></div>
        <div class="menu_item2"><a href="band.html"><img class="socials" src="images/socials/vk.png"></a></div>
        <div class="menu_item2"><a href="band.html"><img class="socials" src="images/socials/youtube.png"></a></div>
    </div>
</div>

И CSS:

.nav, .social {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin: 0 5px 0 5px;
    height: 30px;
    flex-wrap: wrap;
}

.menu_item {
    margin: 0 10px 0 10px;
}

.menu_item2 {
    margin: 0 10px 0 10px;
}

Дайте мне знать, как это происходит.