HTML 不寻常的 flex 包装

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>

是否可以将 flex 中的每个第二个元素放到下一行？ (已经使用订单)我有一个带有 9 个按钮的内联菜单。第二、第四、第六和第八个元素是社交网络的符号。 1、3、5、7、9 - 只是站点的链接。你知道当屏幕宽度小于 xxx 像素时如何让它们停留在不同的行上吗？我尝试使用“@media”，但似乎我必须每 5 个像素更改边距，以使它们停留在不可能长时间这样做的地方。可能还有另一种方法。请帮忙。

Answer 1

我假设链接实际上有所不同，即“Band”将链接到与“Facebook”不同的内容。

如评论中所述，您只想在小屏幕尺寸下使用 media queries和 CSS grid在这里效果很好。请注意，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>

在演示中点击“全页”链接以查看更大的屏幕网格。