Html Justify内容似乎不会影响我的flexbox孩子。是因为我的一个元素的高度/宽度属性吗？

我设置的是一个包含3个子项的flexbox：上一个按钮、一个包含幻灯片的div和下一个按钮。我将flexbox设置为对齐content:center，但箭头会固定在flexbox的远侧，而不是在两侧的幻灯片div旁边。每个箭头和幻灯片之间都有一个间隙，除非我缩小浏览器窗口，使flexbox没有任何额外的空间，否则该间隙不会消失。将内容设置为中心应该使它们保持在一起

幻灯片容器也有同样的问题。它也是一个flexbox，包含3个子项：标题、图像和底部的数字。当我缩小窗口时，幻灯片图像缩小，但是标题和数字都停留在Frasbox的顶部和底部，而不是在图像中间聚集在一起。 我希望这是动态的，这样我就不必为许多不同的断点调整CSS

我尝试过的事情：

• 将所有子项的边距设置为0px
• 将所有子项的填充设置为0px
• 将按钮放在幻灯片放映容器中，而不是 当前父级并将幻灯片显示容器设置为flex
• 调整内容的每一个其他选项（中心、柔性开始、柔性结束等）；他们似乎对孩子们没有任何影响
• 从“我的幻灯片放映”容器中删除“宽度”属性并将其设置为“自动”（这会使幻灯片消失） 从我的幻灯片容器中删除“高度”属性（这确实解决了问题，但也导致幻灯片超出其容器的边界）

我还使用了一些可能不需要包含的javascript，但它将每个新幻灯片的显示设置为阻止，将每个前一张幻灯片的显示设置为无。为了让这张幻灯片正常工作，我的印象是幻灯片需要将其位置设置为绝对，将其父容器设置为相对

下面是我正在使用的确切代码。我最初试图通过删除container1和左边的描述来简化它，以提出这个问题，但后来我无法复制我遇到的问题。我想知道它是否与其中一个元素的高度或宽度属性有关

.container1{
宽度：85%；
高度：650px；
显示器：flex；
证明内容：周围的空间；
对齐项目：居中；
保证金：0自动；
文本对齐：居中；
}
.左{
宽度：45%；
文本对齐：居中；
左边距：30px；
右边距：20px；
}
.描述1{
边缘顶部：20px；
}
.对{
身高：100%；
宽度：45%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.flex{
身高：100%；
显示器：flex；
弯曲方向：立柱；
对齐内容：居中对齐；
}
.slideshow容器{
身高：100%；
宽度：360px；
边缘顶部：25px；
位置：相对位置；
}
.幻灯片{
身高：90%；
宽度：100%；
显示：无；
位置：绝对位置；
}
.slide:第一个子项{display:block}
.幻灯片{
-webkit过渡：0.5s易用性；
过渡：0.5s缓解；
}
.幻灯片图像{
身高：100%；
宽度：100%；
边际：0px；
对象匹配：包含；
}
/*下一步和上一步按钮*/
.按钮{
高度：自动；
}

废话

<
新字
1/10
新角色统计
>