CSS-də Fleksler üzərində Plitə Problemləri
Plitənin ilk problemi ümumiyyətlə dərhal aydındır
- valideynin aydın şəkildə
hündürlüyü təyin etməsi çox əlverişsizdir. Axı bizdə
blokların sayının dəyişəcəyi vəziyyət ola bilər
dynamik olaraq və onların sayı bəzən daha az,
bəzən daha çox ola bilər, 9-dan.
İkinci problem isə, əgər blokların sayı elədirsə ki, sonuncu sətirdə kifayət qədər blok olmasın. Bu halda sonuncu sıra dəhşətli görünəcək:
<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>
.parent {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
width: 320px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Belə çıxır ki, hətta üfüqi istiqamətdə də
space-between dəyəri bizim vəziyyətimizdə
pis işləyir.
Xülasə: əgər alt elementlərinizin sayı
həmişə sabitdirsə və valideynə normal sığırırsa,
onda space-between istifadə edərək plitə
kifayət qədər əlverişli bir şeydir. Əks halda
başqa bir şey düşünmək lazım gələcək.
12 element verilmişdir. Onlardan
hər sırada 4 element olmaqla plitə düzəldin,
hər elementin eni 100px və onların arasındakı məsafə
20px olmalıdır.
12 element verilmişdir. Onlardan
hər sırada 3 element olmaqla plitə düzəldin,
hər elementin eni 150px və onların arasındakı məsafə
10px olmalıdır.