Flexbox: how to put another object here

Question

I'm using display: flex; to create tiles view. I'm trying to put the third picture under the second picture. But, whenever I do it, the third picture went under the first picture and won't come under second picture,

    
    @media screen and (min-width: 1000px) {
      .main {
        height:1800px;
        width: 100%;
        margin: 0px 0px 0px 0px;
        position: relative;
       z-index: 0;
      }
     
      
      .parallax {
        /* The image used */
        background-image: url("https://i.ibb.co/r272XPt/2019-2020.png");
        /* Set a specific height */
        min-height: 400px;
        opacity: 60%;
        filter: blur(2px);
        -webkit-filter: blur(2px);
        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      }
      
      .tiles{
        position:relative;
        top:100px;
        width:90vw;
        margin-left:5vw;
        display: flex;
       flex-wrap: wrap;
      }
      
      .chromebookHelpdesk img{
        margin-left:5vw;
        width:50vw;
        display:block;
      }
      
      .subhelp{
        height:25vw;
      }
      
      .subhelp img{
        margin-left:5vw;
        width:25vw;
        display:block;
      }
      
      .studentsTour img{
        margin-left:5vw;
        width:20vw;
        margin-top:5vw;
        display:block;
      }

      #projects img {
        text-align: center;
        display: block;
        width: 25vw;
        margin: 20px;
      }

      .mission_logo {
        width: 200px;
        display: inline-block;
        float: left;
        text-align: center;
      }

      .mission {
        text-align: center;
        margin-top: 100px;
        font-size: 20px;
      }

      .ingenuity {
        color: #3cba54;
        font-size: 60px !important;
      }

      .creativity {
        color: #f4c20d;
        font-size: 60px !important;
      }

      .innovation {
        color: #db3236;
        font-size: 60px !important;
      }
    }

    @media only screen and (max-width: 1000px) {
      
      .main {
        height:2500px;
        width: 100%;
        margin: 0px 0px 0px 0px;
        position: relative;
        z-index: 0;
      }
    
      .parallax {
        display: none;
      }

      .mission_logo {
        width: 60vw;
        text-align: center;
      }



      .mission {
        text-align: center;
        margin-top: 100px;
        font-size: 15px;
      }



      .ingenuity {
        color: #3cba54;
        font-size: 40px !important;
      }

      .creativity {
        color: #f4c20d;
        font-size: 40px !important;
      }

      .innovation {
        color: #db3236;
        font-size: 40px !important;
      }
    }


    .tiles h1 {
      text-align: center;
      font-size: 50px;
      color: black;
    }


    
    .follow{
      position:relative;
      top:100px;
      text-align:center;
      border-radius: 50%;
      background-color: #84e3ca;
      width: 50vw;
      height: 50vw;
      margin-left: 25vw;
      opacity:70%;
    }
    
    .follow h1{
      font-size:35px;
      padding-top: 20vw;
    }
    
    .follow h2{
      font-size:30px;
    }

  
  <div class="main">
    
    <div class="tiles">
      <div class="chromebookHelpdesk"><a href="https://sledteam.github.io/sled/chromebook"><img
            src="https://github.com/sledteam/sled/blob/master/Chromebook%20Helpdesk.png?raw=true" alt="Chromebook-Helpdesk"></a></div>
      <div class="subhelp"><a href="https://sledteam.github.io/sled/chromebook"><img
            src="https://github.com/sledteam/sled/blob/master/Sub%20Help.png?raw=true" alt="Sub Help"></a>
      </div>
      <div class="studentsTour"><a href="https://sledteam.github.io/sled/chromebook"><img
            src="https://github.com/sledteam/sled/blob/master/New%20Students%20Tour.png?raw=true" alt="New Students Tour"></a></div>

    </div>

I'm stuck with this for a week. I would appreciate it if anyone knows a solution for this.

Naresh · Accepted Answer · 2020-04-01T04:13:54.563

Complete guide to css flexbox

.tiles {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  flex: 1;
}

.section {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.item {
  display: flex;
  flex: 1;
  padding: 1rem;
  margin: 4px;
  background: green;
  color: white;
}

<div class="tiles">
  <div class="section">
    <div class="item">
      <p>Chromebook Helpdesk</p>
    </div>
  </div>
  <div class="section">
    <div class="item">
      <p>Sub Help</p>
    </div>
    <div class="item">
      <p>Student Tour</p>
    </div>
  </div>
</div>

score 1 · Answer 2 · answered Apr 01 '20 at 04:29

It is simple if you understand the concept here is the example:

As per your requirement you need 2 columns with single row so you will be creating flex property, now you need 2 columns hence you make it flex:50% like 2. Now coming to your image section where you need 2 images to be underneath so you will provide the height:50%(right images) and you will give height:100%(left image).

You can keep changing the sizes as you desire. You can also add responsive design for the same. Hope it helps.

* {
  box-sizing: border-box;
}

.row {
  display: flex;
}

.column {
  flex: 50%;
  padding: 5px;
}

<div class="row">
  <div class="column">
    <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg" style="width:100%" />
  </div>
  <div class="column">
    <div class="row">
      <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg" style="width:50%" />
    </div>
    <div class="row">
      <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg" style="width:50%" />
    </div>
  </div>
</div>

You're welcome! would you mind accepting it as answer and voting if you think if it is worth voting? — Manjuboyz, Apr 01 '20 at 11:57

Flexbox: how to put another object here

2 Answers2