Box sıralama
merhabalar..
Tayfun hocanın bir videosu vardı bulamadım. Flex yapısıyla yada margin ile yapıyordu.
Sorunumu anlatayım ben :)
container içerisinde kutular olacak. Eklendikçe dizilecek ve aşağıya doğru sıra sıra gidecekler..
flex yapısını kullandığımda en sonda kalan kutular ya ortalanıyor yada flex 1 yaptığım için tamamen kaplıyor.
Sol köşeden başlayarak container içerisine aşağıyada kayacak şekilde ayarlanmasını istiyorum
margin-right değerini verdiğimde her satırda en sağdakilerde bu değeri aldığı için görüntü kötü oluyor.
1 2 3 4 5 6
1 2 3 4 5 6
1 2 3 4 5 6
Bu konuda dökümantasyon varsa açığım.
<div class="box">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
<div class="item">Item 9</div>
<div class="item">Item 10</div>
<div class="item">Item 11</div>
<div class="item">Item 12</div>
</div>
.box{
display:flex;
flex-wrap: wrap;
height:auto;
}
.item{
border: 1px solid #e2e9f1;
margin: 5px 3px;
width: calc(100% / 6 - 10px);
}