CSS-de flekslerde plitka meseleri
Plitkanyň ilkinji meselesi, umuman, derrew aýdyň
- ebeýýetine ýokarylygy açyk-aýdan bermeli bolýandygynyň
örän amatsyzlygy. Sebäbi bizde bloklaryň mukdarynyň
dynamiki üýtgeýändigi we olaryň mukdarynyň bäzen 9-dan
az, bäzen-de köp bolup biler.
Ikinji mesele bolsa, iň soňky hatarda ýeterlik bolmajak bloklar bolsa ýüze çykar. Bu ýagdaýda iň soňky hatar erbet görüner:
<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;
}
:
Şeýlelikde, gorizontal ýönekeý ýagdaýda-da
space-between bahasy bizim ýagdaýymyzda
ýaramaz işleýär.
Jemleýärin: Eger şuwaýtlyklaryňyzyň mukdary
hemişe yzygiderli bolsa we ata-da normal ýerleşýän
bolsa, onda space-between plitkasy ýeterlik
degrede amatly zat. Beýleki ýagdaýda başga bir zat
oýtapmaly bolar.
12 element berlen. Olardan 4 element
hatar boýunça, her elementiniň ini 100px we
olaryň arasyndaky aralyk 20px bolan plitka ýasap
beriň.
12 element berlen. Olardan 3 element
hatar boýunça, her elementiniň ini 150px we
olaryň arasyndaky aralyk 10px bolan plitka ýasap
beriň.