Html Flexbox之间的空间行为问题

我在一个flex容器中有五个li文本元素，它们具有以下属性

.contentwrapper{
位置：相对位置；
宽度：100%；
左侧填充：计算（（（100vw-（13rem））/12）*2+（1rem*1））+1.5rem）；
填充右侧：计算（（（（100vw-（13rem））/12）*2）+（1rem*1））+1.5rem-.1px）；
保证金：0自动；
身高：100%；
}
ul导航{
位置：相对位置；
填充顶部：100px；
显示器：flex；
柔性包装：包装；
弯曲方向：行；
证明内容：之间的空间；
列表样式：无；
}
李纳维滕{
位置：相对位置；
显示：内联块；
游标：默认值；
字体大小：1.2米；
文本转换：大写；
}

在线
亲自
通过电话
移动应用程序
囚犯

删除所有边距和填充，并设置框大小：边框框

*{
框大小：边框框；
保证金：0；
填充：0；
}
.contentwrapper{
位置：相对位置；
宽度：100%；
左侧填充：计算（（（100vw-（13rem））/12）*2+（1rem*1））+1.5rem）；
填充右侧：计算（（（（100vw-（13rem））/12）*2）+（1rem*1））+1.5rem-.1px）；
保证金：0自动；
身高：100%；
背景：红色；
}
ul导航{
位置：相对位置；
显示器：flex；
柔性包装：包装；
弯曲方向：行；
证明内容：之间的空间；
列表样式：无；
背景：粉红色；
}
李纳维滕{
位置：相对位置；
游标：默认值；
字号：1em；
文本转换：大写；
边框：1px纯灰；
}

在线
亲自
通过电话
移动应用程序
囚犯

它因浏览器而异，但默认情况下，

ul

元素有边距和填充。见本问答：

因此，在您的情况下需要做的是从

ul

元素中删除默认边距和填充：

ul.nav {
  position: relative;
  margin: 0; /* <- here */
  padding: 100px 0 0; /* here, too, but retaining custom 100px top padding */
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  list-style: none;
}

ul.nav{
位置：相对位置；
边距：0；/*请提供一个图像以外的示例，它看起来像具有指定宽度和文本中心的
元素。至少显示
元素的CSS规则。您也可以在此处提供一个片段，这样我们就可以在没有图像的情况下看到问题。看起来您已将
flex:1
应用于
元素这是一个jsfiddle-可能重复的感谢你这么多。！