CSS-de flekslerde plitochka
Indi fleksbokslerde plitochka ýasamagy öwreneli. Ilki bilen, fleks bloklaryny birnäçe hatarda, her hatarda üç blok bolup ýerleşdireris.
Bunun üçin, fleksleriň ata-enesiniň ini 300px we flex-wrap aýratynlygyny wrap⁅/v ⁆ bahasynda belläp, çagalaryna ini 100px⁅/u ⁆ bereli:
<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;
}
:
Indi bloklarymyzyň arasyndaky gorizontal aralygy ýasalyň. Bunuň üçin, aralyklar üçin goşmaça ýer bermek maksady bilen ata-enäniň ini ulyrulyň.
Bir hatarda üç blok bolany üçin, olaryň arasynda iki sany aralyk bolýar. Diýeli, her aralygyň ini 10px⁅/u ⁆ bolsun. Şeýlelikde, ata-enäniň ini 20px⁅/u ⁆ ulyrtmaly, ýagny 300px⁅/u ⁆ däl-de, 320px⁅/u ⁆ etmeli.
Indi bloklaryň ata-enesine justify-content aýratynlygyny space-between⁅/v ⁆ bahasynda berip, islendik aralygy alyň:
<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;
}
:
Indi bloklaryň arasyndaky şonuň ýaly aralygy dikeý ýönde hem goşalyň. Bunuň üçin align-content aýratynlygyny space-between⁅/v ⁆ bahasynda bermek bolar.
Emma munuň üçin ata-enäniň beýikligini bermek gerek, ýoksa align-content⁅/c ⁆ işlemez. Beýikligini 320px⁅/u ⁆ edeli. Bu ýagdaýda, her biri 100px⁅/u ⁆ beýiklikdäki üç hatar blok we hatarlaryň arasyndaky iki sany 10px⁅/u ⁆ aralyk ýerleşer.
Indi işledeli:
<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;
}
:
Hemme gowy işleýär, ýöne indiki sapakda seredžek käbir problemalar bar.
