I'm in the process of using flexbox on my website. I have 10 div elements that I want to wrap around each other closely without any gaps between them.
My goal is to have "4" positioned to the right of "1", instead of creating a new row and moving down. How can I achieve this effect? Are there any jQuery plugins that can simplify this process? However, I prefer understanding the basic concept behind it rather than relying on plugins.
.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>