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:

html<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>

css.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ň:

html<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>

css.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:

html<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>

css.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.