A CSS flexbox-os mozaikproblémái

Az első probléma a mozaikkal kapcsolatban alapvetően azonnal nyilvánvaló - nagyon kényelmetlen, hogy a szülőnek explicit meg kell adnia a magasságot. Hiszen teljesen lehetséges, hogy a blokkok száma dinamikusan változik, és számuk időnként kevesebb, időnként több lesz, mint 9.

A második probléma akkor merül fel, ha a blokkok száma olyan, hogy az utolsó sorban nem lesz elegendő blokk. Ebben az esetben az utolsó sor rettenetesen fog kinézni:

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

Результат:

Kiderül, hogy még vízszintesen is a space-between érték rosszul működik a mi esetünkben.

Összegezzük: ha az utódok száma mindig állandó és rendesen elfér a szülőben, akkor a space-between mozaik meglehetősen kényelmes dolog. Ellenkező esetben valami mást kell kitalálni.