我是 Flexbox 新手，非常想在 Flex 容器下方添加一个单独的独立图像。我希望“底部”元素的图像和容器的元素在整个网页上居中并垂直对齐，并且具有响应能力，以便它们也可以通过媒体查询根据屏幕尺寸的任何变化来调整大小。
这是我到目前为止尝试过的 html 和 css 代码，但是“底部”图像被切断而不是完全显示，并且元素没有按照我想要的方式对齐或居中。任何帮助将不胜感激！！
/* container */
main {
display: flex;
flex-direction: column;
justify-content: center;
/* top right bottom left */
margin: -5vh -5vh -5vh -5vh;
}
/* posts inside container */
section {
background-color: #eee;
font-size: 22px;
color: #000;
width: 35%;
height: 40vh;
/* top right bottom left */
padding: 20px 20px 20px 20px;
overflow-x: hidden;
overflow-y: auto;
}
/* container background image */
article {
width: 100%;
height: 70vh;
background-image: url('https://files.catbox.moe/7g19g9.png');
background-size: contain;
background-repeat: no-repeat;
/* top right bottom left */
padding: 45px 45px 45px 45px;
overflow: hidden;
order: 1;
}
/* image under the main container */
bottom {
width: 100%;
height: 100vh;
overflow: hidden;
order: 2;
margin-top: 5vh;
background-size: contain;
background-repeat: no-repeat;
background-image: url('https://files.catbox.moe/mmzfey.png');
}<html>
<head>
<style>
</style>
</head>
<body>
<article>
<main>
<bottom></bottom>
<section>
div elements for posts with scrollbar here
</section>
</main>
</article>
</body>
</html>这是您要找的吗？
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* container */
main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* posts inside container */
section {
background-color: #eee;
font-size: 22px;
color: #000;
width: 35%;
height: 40vh;
/* top right bottom left */
padding: 20px 20px 20px 20px;
overflow-x: hidden;
overflow-y: auto;
}
/* container background image */
article {
width: 100%;
height: 100vh;
background-image: url('https://files.catbox.moe/7g19g9.png');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
padding: 45px 45px 45px 45px;
order: 1;
}
/* image under the main container */
bottom {
width: 100%;
height: calc(55vh - 90px);
overflow: hidden;
order: 2;
margin-top: 5vh;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-image: url('https://files.catbox.moe/mmzfey.png');
}<html>
<head>
<style>
</style>
</head>
<body>
<article>
<main>
<bottom></bottom>
<section>
div elements for posts with scrollbar here
</section>
</main>
</article>
</body>
</html>