How to make my second set of box move under on the first box

Question

Please see the HTML and CSS below:

.nw-folder-icon-a {
  fill: #ffc92c;
}

.nw-folder-icon-b {
  fill: #ff9f00;
}

.nw-folder-icon-c {
  fill: #ffffff;
}

.ex-item {
    display: flex;
    align-items: center;
    border: 2px solid blue;
    width: 18%;
    border-radius: 10px;
    padding: 10px 20px;
}

.ex-title {
    font-weight: 600;
    width: calc(100% - 60px);
    margin-left: 10px;
}

.icon-folder-main {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

<div class="icon-folder-main">
  <div class="ex-item">
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 50 50" width="50px" height="50" class="nw-folder-icon">
  <path class="nw-folder-icon-a" d="M47,11V38a4,4,0,0,1-4,4H7a4,4,0,0,1-4-4V11A2,2,0,0,1,5,9H45A2,2,0,0,1,47,11Z"/>
  <path class="nw-folder-icon-b" d="M45,8H5a3,3,0,0,0-3,3V38a5,5,0,0,0,5,5H43a5,5,0,0,0,5-5V11A3,3,0,0,0,45,8Zm1,23v7a3,3,0,0,1-3,3H7a3,3,0,0,1-3-3V27a3,3,0,0,1,3-3H26.13A5,5,0,0,0,30,22.21l1.78-2.13A3,3,0,0,1,34.07,19H43a3,3,0,0,1,3,3ZM42,15v2H34.07a5,5,0,0,0-3.85,1.8l-1.79,2.13A3,3,0,0,1,26.13,22H8V15a1,1,0,0,1,1-1H41A1,1,0,0,1,42,15Zm4,3a4.84,4.84,0,0,0-2-.93V15a3,3,0,0,0-3-3H9a3,3,0,0,0-3,3v7.1A4.84,4.84,0,0,0,4,23V11a1,1,0,0,1,1-1H45a1,1,0,0,1,1,1Z"/>
  <path class="nw-folder-icon-c" d="M26.13,22H8V15a1,1,0,0,1,1-1H41a1,1,0,0,1,1,1v2H34.07a5,5,0,0,0-3.85,1.8l-1.79,2.13A3,3,0,0,1,26.13,22Z"/></svg>
  <div class="ex-title">APECH</div>
</div>
  
    <div class="ex-item">
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 50 50" width="50px" height="50" class="nw-folder-icon">
  <path class="nw-folder-icon-a" d="M47,11V38a4,4,0,0,1-4,4H7a4,4,0,0,1-4-4V11A2,2,0,0,1,5,9H45A2,2,0,0,1,47,11Z"/>
  <path class="nw-folder-icon-b" d="M45,8H5a3,3,0,0,0-3,3V38a5,5,0,0,0,5,5H43a5,5,0,0,0,5-5V11A3,3,0,0,0,45,8Zm1,23v7a3,3,0,0,1-3,3H7a3,3,0,0,1-3-3V27a3,3,0,0,1,3-3H26.13A5,5,0,0,0,30,22.21l1.78-2.13A3,3,0,0,1,34.07,19H43a3,3,0,0,1,3,3ZM42,15v2H34.07a5,5,0,0,0-3.85,1.8l-1.79,2.13A3,3,0,0,1,26.13,22H8V15a1,1,0,0,1,1-1H41A1,1,0,0,1,42,15Zm4,3a4.84,4.84,0,0,0-2-.93V15a3,3,0,0,0-3-3H9a3,3,0,0,0-3,3v7.1A4.84,4.84,0,0,0,4,23V11a1,1,0,0,1,1-1H45a1,1,0,0,1,1,1Z"/>
  <path class="nw-folder-icon-c" d="M26.13,22H8V15a1,1,0,0,1,1-1H41a1,1,0,0,1,1,1v2H34.07a5,5,0,0,0-3.85,1.8l-1.79,2.13A3,3,0,0,1,26.13,22Z"/></svg>
  <div class="ex-title">APECH</div>
</div>
  
    <div class="ex-item">
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 50 50" width="50px" height="50" class="nw-folder-icon">
  <path class="nw-folder-icon-a" d="M47,11V38a4,4,0,0,1-4,4H7a4,4,0,0,1-4-4V11A2,2,0,0,1,5,9H45A2,2,0,0,1,47,11Z"/>
  <path class="nw-folder-icon-b" d="M45,8H5a3,3,0,0,0-3,3V38a5,5,0,0,0,5,5H43a5,5,0,0,0,5-5V11A3,3,0,0,0,45,8Zm1,23v7a3,3,0,0,1-3,3H7a3,3,0,0,1-3-3V27a3,3,0,0,1,3-3H26.13A5,5,0,0,0,30,22.21l1.78-2.13A3,3,0,0,1,34.07,19H43a3,3,0,0,1,3,3ZM42,15v2H34.07a5,5,0,0,0-3.85,1.8l-1.79,2.13A3,3,0,0,1,26.13,22H8V15a1,1,0,0,1,1-1H41A1,1,0,0,1,42,15Zm4,3a4.84,4.84,0,0,0-2-.93V15a3,3,0,0,0-3-3H9a3,3,0,0,0-3,3v7.1A4.84,4.84,0,0,0,4,23V11a1,1,0,0,1,1-1H45a1,1,0,0,1,1,1Z"/>
  <path class="nw-folder-icon-c" d="M26.13,22H8V15a1,1,0,0,1,1-1H41a1,1,0,0,1,1,1v2H34.07a5,5,0,0,0-3.85,1.8l-1.79,2.13A3,3,0,0,1,26.13,22Z"/></svg>
  <div class="ex-title">APECH</div>
</div>
  
    <div class="ex-item">
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 50 50" width="50px" height="50" class="nw-folder-icon">
  <path class="nw-folder-icon-a" d="M47,11V38a4,4,0,0,1-4,4H7a4,4,0,0,1-4-4V11A2,2,0,0,1,5,9H45A2,2,0,0,1,47,11Z"/>
  <path class="nw-folder-icon-b" d="M45,8H5a3,3,0,0,0-3,3V38a5,5,0,0,0,5,5H43a5,5,0,0,0,5-5V11A3,3,0,0,0,45,8Zm1,23v7a3,3,0,0,1-3,3H7a3,3,0,0,1-3-3V27a3,3,0,0,1,3-3H26.13A5,5,0,0,0,30,22.21l1.78-2.13A3,3,0,0,1,34.07,19H43a3,3,0,0,1,3,3ZM42,15v2H34.07a5,5,0,0,0-3.85,1.8l-1.79,2.13A3,3,0,0,1,26.13,22H8V15a1,1,0,0,1,1-1H41A1,1,0,0,1,42,15Zm4,3a4.84,4.84,0,0,0-2-.93V15a3,3,0,0,0-3-3H9a3,3,0,0,0-3,3v7.1A4.84,4.84,0,0,0,4,23V11a1,1,0,0,1,1-1H45a1,1,0,0,1,1,1Z"/>
  <path class="nw-folder-icon-c" d="M26.13,22H8V15a1,1,0,0,1,1-1H41a1,1,0,0,1,1,1v2H34.07a5,5,0,0,0-3.85,1.8l-1.79,2.13A3,3,0,0,1,26.13,22Z"/></svg>
  <div class="ex-title">APECH</div>
</div>
  
    <div class="ex-item">
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 50 50" width="50px" height="50" class="nw-folder-icon">
  <path class="nw-folder-icon-a" d="M47,11V38a4,4,0,0,1-4,4H7a4,4,0,0,1-4-4V11A2,2,0,0,1,5,9H45A2,2,0,0,1,47,11Z"/>
  <path class="nw-folder-icon-b" d="M45,8H5a3,3,0,0,0-3,3V38a5,5,0,0,0,5,5H43a5,5,0,0,0,5-5V11A3,3,0,0,0,45,8Zm1,23v7a3,3,0,0,1-3,3H7a3,3,0,0,1-3-3V27a3,3,0,0,1,3-3H26.13A5,5,0,0,0,30,22.21l1.78-2.13A3,3,0,0,1,34.07,19H43a3,3,0,0,1,3,3ZM42,15v2H34.07a5,5,0,0,0-3.85,1.8l-1.79,2.13A3,3,0,0,1,26.13,22H8V15a1,1,0,0,1,1-1H41A1,1,0,0,1,42,15Zm4,3a4.84,4.84,0,0,0-2-.93V15a3,3,0,0,0-3-3H9a3,3,0,0,0-3,3v7.1A4.84,4.84,0,0,0,4,23V11a1,1,0,0,1,1-1H45a1,1,0,0,1,1,1Z"/>
  <path class="nw-folder-icon-c" d="M26.13,22H8V15a1,1,0,0,1,1-1H41a1,1,0,0,1,1,1v2H34.07a5,5,0,0,0-3.85,1.8l-1.79,2.13A3,3,0,0,1,26.13,22Z"/></svg>
  <div class="ex-title">This folder should be on the left side<----</div>
</div>
</div>

Hi guys, just asking as you can see the boxes on the second set are centered because I used justify-content: center; on my main container .icon-folder-main. My goal is if the boxes go to the 2nd set it should be under the first box. I tried using `flex-start still not working. Can anyone help me with the correct way to implement it?

it solved the problem by removing the justify-content: center; however on the right side there's a lot of white space. I used that css code to minimal the with space on the right side — CoreTM, Oct 16 '21 at 05:55
if you want to place the 2nd row of boxes from start then why are you using `justify-content:center;` ? — Uttam, Oct 16 '21 at 06:08
I used it to balance the whitespace on both sides. @Uttam. However, I'm still looking for an answer on how to do it correctly. Well using justify-content:center; solved it but I still have the problem on getting a lot of whitespace on the rightside. — CoreTM, Oct 16 '21 at 06:12
you could add a new div and set its width in 94% and set `margin:auto` so it will be centered — Viira, Oct 16 '21 at 06:20
Hi @Viira I tried what you say but I think I'm still getting the whitespace on the right side please see it here https://codepen.io/rico-p-buenviaje/pen/mdMVwyG Thanks — CoreTM, Oct 16 '21 at 06:36
Hi, @Viira thanks for your time. Yes I also tried it however if you have 1 box at the second set it automatically going centered — CoreTM, Oct 16 '21 at 06:42

score 0 · Answer 1 · answered Oct 16 '21 at 07:05

0

justify-content:space-between;

answered Oct 16 '21 at 07:05

Arezou Saremian

508
3
8

1

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. You can find more information on how to write good answers in the help center: https://stackoverflow.com/help/how-to-answer . Good luck – nima Oct 16 '21 at 12:51

How to make my second set of box move under on the first box

1 Answers1