Qfyilyi

#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>

Is it possible to put each second element in the flex to the next row? (Use orders already)
I have an inline menu with 9 buttons. 2nd, 4th, 6th and 8th element is a symblol of a social network. 1, 3, 5, 7, 9 - are just site's links. Do you know how to make them stay on different lines, when width of the screen is smaller than xxx pixels? I tried to use "@media" but it seems like I have to change sides' margins each 5 pixels to make them stay on places what is impossible long way to do so. May be there is another way for this. Please, help.

I'm going to assume the links actually vary, i.e "Band" will link to something different than "Facebook".

As it's mentioned in comment you only want to to this at small screen sizes we can use media queries and CSS grid to good effect here. Note that CSS grid does have some compatibility issues: 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>

In the demo hit the "Full page" link to see the larger screen grid in action.

Try this:

<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>

And 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;

}

Let me know how it goes.