Search code examples
htmlcssflexboxcss-position

Having some trouble with my flexbox component positioning


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

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?


Solution

  • 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 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>