Having some trouble with my flexbox component positioning-CodePudding

This is what I currently have: Here

This is what I want: Here

.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 >
    <div >
      <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>

I was messing around with the CSS padding and margins, but I didn't have any luck. I'm also new to Flexboxes so perhaps I missed something in my container CSS?

CodePudding user response：

You can try this approach with a flexbox on content.

Side note that I'm using a fake image and fixed height on images for the demo purpose, you can modify them with your needs.

.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 >
    <div >
      <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>

CodePudding user response：

I think the problem is you have given padding top as 30px for the first image.Just removing the padding top may be helpful for you. change the first image padding from

<img src="images/manifestspace.png" style="width: 30vw; padding-top: 30px;">

to
<img src="images/manifestspace.png" style="width: 30vw; padding-top: 0;">