Как обернуть Div друг вокруг друга

Question

Я использую flexbox. У меня есть 10 div, которые я хочу, чтобы все обертывали друг друга как можно больше, не оставляя промежутков между ними.

Что я хочу сделать, так это «4» начать с правой стороны «1» вместо того, чтобы спускаться в другую строку. Как мне это сделать? Любые плагины jquery, чтобы сделать это проще? Я хотел бы знать основы этого, хотя и не полагаться на плагины.

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

Вы должны разбить каждый раздел, который вы хотите быть рядом друг с другом в разные контейнеры Див. Вам также необходимо убедиться, что контейнер div, div с классом «контейнер», является точной шириной, которую вы хотите.

Основной принцип: 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; 
} 

Как я не совсем уверен, как именно вы хотите, чтобы ваши ящики разделены, это должно дать вам базовые для того, чтобы манипулировать как вы хотите.