How to wrap Div's around each other

Question

I am using flexbox. I have 10 div's that I want to all wrap around each other as much as possible without leaving any space in between.

What I want to do is have "4" start at the right side of "1" instead of going down into another row. How would I go about doing this? Any jquery plugins to make this easier? I'd like to know the basics behind doing this though without having to rely on plugins.

https://jsfiddle.net/414yhvxd/

 .container{ display:flex; flex-wrap:wrap; flex-direction:row; height:900px; background:gray; max-height:900px; } .box{ color:white; font-size:30px; text-align:center; background:black; width:200px; height:200px; margin:2px; } .type1{ height:300px; } .type2{ width:500px; } .type3{ height:40px; width:50px; } .type4{ height:600px; } 

 <div class="container"> <div class="box type1">1</div> <div class="box type2">2</div> <div class="box">3</div> <div class="box type3">4</div> <div class="box">5</div> <div class="box type4">6</div> <div class="box">7</div> <div class="box">8</div> <div class="box">9</div> <div class="box">10</div> </div> 

Answer 1

You should break each section you want to be beside each other into different div containers. You will also need to make sure that the container div, div with class "container", is the exact width you want.

The basic principle: https://jsfiddle.net/414yhvxd/1/

<div class="container">
  <div>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
  </div>
  <div>
    <div class="box type3">4</div>
    <div class="box">5</div>
    <div class="box type4">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9</div>
    <div class="box">10</div>
  </div>
</div>  

.container{
   display:flex;
  flex-wrap:wrap;
  flex-direction:row;
  height:900px;
  background:gray;
  max-height:900px;
}

.box{
  color:white;
  font-size:30px;
  text-align:center;
  background:black;
  width:200px;
  height:200px;
  margin:2px;
}
.type1{
  height:300px;
}
.type2{
  width:500px;
}
.type3{
  height:100px;
  width:50px;
  }
.type4{
  height:600px;
}

As I'm not entirely sure exactly how you want your boxes split, this should give you a baseline in order to manipulate it as you want.