这就是我目前拥有的：这里是
这就是我想要的：在这里
.headercontainer {
display: flex;
justify-content: center;
align-items: center;
background-image: url("https://static.wixstatic.com/media/062482_377883e1ce2a449aba2c775b8f57027b~mv2.jpeg/v1/fill/w_1215,h_810,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/062482_377883e1ce2a449aba2c775b8f57027b~mv2.jpeg");
height: 35vw;
padding-top: 10px;
background-repeat: repeat-x;
background-size: cover;
background-position: center;
}
.container {
display: flex;
justify-content: space-evenly;
align-items: center;
padding-top: 60px;
padding-bottom: 60px;
background-color: pink;
/* height: 150vh; */
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Real Estate</title>
<link rel="stylesheet" href="styles.css">
</head>
<body style="background-color: #e3e3e3;">
<div class="headercontainer">
<div class="content">
<img src="images/manifestspace.png" style="width: 30vw; padding-top: 30px;">
<img src="images/welcomehome.png" style="width: 50vw;">
<img src="images/buysell.png" style="width: 50vw;">
</div>
</div>
</body>
</html>我一直在摆弄CSS填充和边距，但运气不好。我也是Flexboxes的新手，所以也许我在容器CSS中遗漏了什么？
您可以在content上的flexbox上尝试这种方法。
侧面注意，我使用了一个假图像和固定高度的图像用于演示目的，您可以根据需要进行修改
.headercontainer {
display: flex;
justify-content: center;
align-items: center;
background-image: url("https://static.wixstatic.com/media/062482_377883e1ce2a449aba2c775b8f57027b~mv2.jpeg/v1/fill/w_1215,h_810,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/062482_377883e1ce2a449aba2c775b8f57027b~mv2.jpeg");
height: 35vw;
background-repeat: repeat-x;
background-size: cover;
background-position: center;
}
.content {
display: flex;
flex-direction: column; /*Display all images from top to bottom*/
align-items: center; /*Align all images to be center*/
height: 100%; /*Make the image container full-height*/
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Real Estate</title>
<link rel="stylesheet" href="styles.css">
</head>
<body style="background-color: #e3e3e3;">
<div class="headercontainer">
<div class="content">
<img src="https://fujifilm-x.com/wp-content/uploads/2019/08/x-t30_sample-images02.jpg" style="width: 30vw; margin-bottom: 50px;" height="100">
<img src="https://fujifilm-x.com/wp-content/uploads/2019/08/x-t30_sample-images02.jpg" style="width: 50vw; margin-bottom: 10px;" height="50">
<img src="https://fujifilm-x.com/wp-content/uploads/2019/08/x-t30_sample-images02.jpg" style="width: 50vw;" height="50">
</div>
</div>
</body>
</html>我认为问题是，第一个图像的填充顶部为30px。只需卸下衬垫顶部可能会对您有所帮助。从更改第一个图像填充
<img src="images/manifestspace.png" style="width: 30vw; padding-top: 30px;">
to
<img src="images/manifestspace.png" style="width: 30vw; padding-top: 0;">