v2.5.2
Giriş yap

Box sıralama

webman
537 defa görüntülendi
3

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.

css
Cevap yaz
Cevaplar (3)
makifgokce
1287 gün önce

bu şekilde bişeymi istiyorsun.
justify-content ve align-content değerini değiştirerek deneyebilirsin.

.box{
  display:flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
  height: auto;
}
.item{
  border: 1px solid #000;
  background: #ccc;
  margin: 5px 3px;
  width: 100px;
  height: 100px;
}
0
#005505
webman
1287 gün önce

malesef hocam istediğim gibi olmadı. Sizin dediğiniz şekilde yapınca 6 lı grid sistemi oluyor.

https://resmim.net/i/12.fmeGy

Bu linkte çizdiğim şekilde olacak ilk ve ekran boyutuna göre küçültünce aşağı inecek kutular ama aynı satırda en sağda boşluk kalmayacak

0
#005502
makifgokce
1287 gün önce
<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);
}
0
#005501