CSS Flex izkārtojuma flīžu problēmas

Pirmā flīžu izkārtojuma problēma kopumā ir uzreiz acīmredzama - ir ļoti neērti, ka vecākam elementam ir skaidri jānorāda augstums. Galu galā mums var būt tāda situācija, ka bloku skaits mainīsies dinamiski un to skaits būs reizēm mazāks, reizēm lielāks par 9.

Bet otrā problēma radīsies, ja bloku skaits būs tāds, ka pēdējā rindā būs niecīgs bloku daudzums. Šajā gadījumā pēdējā rinda izskatīsies šausmīgi:

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>

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

Результат:

Izrādās, ka pat horizontāli vērtība space-between mūsu gadījumā darbojas slikti.

Rezumējot: ja jūsu pēcteču skaits vienmēr ir nemainīgs un tie normāli ietilpst vecākā elementā, tad flīžu izkārtojums ar space-between ir pietiekami ērts risinājums. Pretējā gadījumā būs jāizdomā kaut kas cits.