Html Flexbox-如何在中心制作徽标并将其他项目包裹起来 我有下面的菜单（。logo >代码>。Suffals被JS放在里面，我需要有。LOGO 总是在页面的中间，其他的物品都是同样包裹的。 <ul class="menu"> <li><a href="/">Homepage</a></li> <li><a href="/contact/">Contact</a></li> <li><a href="/documentary/">Documentary</a></li> <div class="logo"></div> <li><a href="/stories/">Stories</a></li> <li><a href="/weddings/">Weddings</a></li> <div class="socials"> <a href="https://www.instagram.com"><i class="sprite-instagram">i</i></a> <a href="https://www.facebook.com"><i class="sprite-email">f</i></a> </div> </ul>

如果你想看一下的话，这里有一把小提琴：

另一把

li

的小提琴通过推动使flex项目变小。这是不可能的，因为所有的

li

都没有足够的空间显示

您使用的是flex容器，它使用空间分布来定位项目

为了使徽标水平居中，左侧和右侧的内容需要占用相同的空间。这将创造平等的平衡，标志可以居中

或者，您可以使用绝对定位从正常流程中删除徽标。然后使用

left

和

transform

将徽标居中

这里详细介绍了这两种方法（以及其他方法）：

下面是一个例子：

菜单{
显示器：flex；
位置：相对位置；
证明内容：周围的空间；
高度：80px；
左边距：自动；
右边距：自动；
填充：0；
}
.菜单>*{
flex:1；/*请参见下面的链接说明*/
列表样式类型：无；
边框：1px黑色虚线；
显示器：flex；
对齐项目：居中；
证明内容：中心；
文本对齐：居中；
}
.标志{
flex:00200px；/*也可以尝试'flex:2'*/
背景色：红色；
}

此代码应该适用于您（我假设您不想要要点，所以我也添加了（列表样式：无）

菜单{
sisplay:-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
宽度：100%；
位置：相对位置；
-ms-flex-pack：分发；
证明内容：周围的空间；
-webkit框对齐：居中；
-ms-flex-align：居中；
对齐项目：居中；
列表样式：无；
填充：0px；
边际：0px；
}
梅努特姆先生{
宽度：14.28%；
文本对齐：居中；
}
.标志{
宽度：14.28%；
文本对齐：居中；
}

为了使所有元素的大小相同，我在所有

中添加了
flex-basis:100%
。li

和

。socials

元素和

flex-basis:200%

到

。logo

中，这很好地解决了我的问题。我很高兴这是一种蛮力解决方案。我添加了一个更自然、更高效的解决方案方法。有关完整的解释，请参阅链接帖子。

.menu {
  bottom: 0;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  position: relative;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}