Html 使用flexbox在元素之间设置间距时出现问题

.flexbox{
显示器：flex；
}
.导航{
弯曲方向：行；
证明内容：之间的空间；
对齐项目：拉伸；
最大高度：100px；
边缘顶部：15px；
}
.标志{
高度：100px；
}
img{
身高：100%；
}
.集装箱{
弯曲方向：行；
}
保险商实验室{
列表样式：无；
显示器：flex；
弯曲方向：行；
证明内容：之间的空间；
}
ul a{
颜色：灰色；
文字装饰：无；
}

之间的空格不是好的选择。试试flex end，不要考虑位置菜单。使用空格填充

.flexbox{
显示器：flex；
}
.导航{
弯曲方向：行；
证明内容：之间的空间；
对齐项目：拉伸；
最大高度：100px；
边缘顶部：15px；
}
.标志{
高度：100px；
}
img{
身高：100%；
}
.集装箱{
弯曲方向：行；
}
保险商实验室{
列表样式：无；
显示器：flex；
弯曲方向：行；
证明内容：柔性端；
}
ul a{
颜色：灰色；
文字装饰：无；
显示：内联块；
填充物：5px10px；
边际：0.2px；
}

.flexbox{
显示器：flex；
}
.导航{
弯曲方向：行；
证明内容：之间的空间；
对齐项目：居中；
最大高度：100px；
边缘顶部：15px；
}
.标志{
对齐项目：居中；
宽度：50%；
}
img{
身高：100%；
}
.集装箱{
弯曲方向：行；
宽度：50%；
}
保险商实验室{
列表样式：无；
显示器：flex；
弯曲方向：行；
证明内容：之间的空间；
宽度：100%；
}
ul a{
颜色：灰色；
文字装饰：无；
}

JS-Bin

您可以使用此代码

正文{
保证金：0；
填充：0；
}        
.flexbox{
显示器：flex；
}
.导航{
弯曲方向：行；
证明内容：之间的空间；
对齐项目：拉伸；
最大高度：50px；
边际上限：0；
背景颜色：灰色；
保证金：0；
填充：10px；
}
.标志{
保证金：0；
填充：0；
}
img{
保证金：0；
填充：0；
}
.集装箱{
弯曲方向：行；
}
保险商实验室{
列表样式：无；
显示器：flex；
弯曲方向：行；
证明内容：之间的空间；
保证金：0；
填充：0；
}
ul a{
颜色：#ffffff；
文字装饰：无；
字体大小：16px；
字体大小：400；
填充：15px；
}

第二个答案告诉我，使用空格不是一个好的选择。那是真的？不，不是那样的！但由于屏幕尺寸的原因，空间会减少。您必须编写一些媒体查询，或者您可以对li进行填充。如果我是你，我可能会选择填充并使两个div对齐：居中；