CSS'te Esnek Kutular ile Karo Düzeni
Şimdi esnek kutular ile karo düzeni yapmayı öğrenelim. İlk olarak, esnek kutuları üçlü sıralar halinde düzenleyelim.
Bunun için, esnek kutuların ebeveynine 300px genişlik ve flex-wrap özelliğine wrap değerini atayalım, alt öğelere ise 100px genişlik verelim:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-wrap: wrap;
width: 300px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Şimdi bloklarımız arasında yatay boşluk oluşturalım. Bunun için, boşluklar için ek alan yaratmak amacıyla ebeveynin genişliğini artıralım.
Her sırada üç blok olduğu için, aralarında iki boşluk olacaktır. Her bir boşluğun 10px genişliğinde olmasını istediğimizi varsayalım. Bu durumda, ebeveynin genişliğinin 20px, yani 300px yerine 320px artırılması gerekecektir.
Şimdi, blokların ebeveynine justify-content özelliğini space-between değerine ayarlayalım ve bloklar arasında istediğimiz boşluğu elde edelim:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 320px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Şimdi bloklar arasında dikey olarak da aynı boşluğu ekleyelim. Bunun için, align-content özelliğini space-between değerine ayarlayabiliriz.
Ancak bunun için ebeveynin yüksekliğini belirlememiz gerekir, aksi takdirde align-content çalışmaz. Yüksekliği 320px olarak ayarlayalım. Bu durumda, 100px yüksekliğinde üç sıra blok ve aralarında 10px'lik iki boşluk tam olarak sığacaktır.
Hadi çalıştıralım:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
justify-content: space-between;
align-content: space-between;
flex-wrap: wrap;
width: 320px;
height: 320px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Her şey harika çalışıyor, ancak bir sonraki derste ele alacağımız bazı sorunlar var.
