Ploščice s flexboxi v CSS

Zdaj se naučimo delati ploščice s flexboxi. Za začetek postavimo flex-bloke v več vrstic, po trije bloki v vrsto.

Za to nastavimo starševskemu elementu flexov širino na 300px in flex-wrap na vrednost wrap, potomcem pa širino na 100px:

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

Результат:

Zdaj naredimo razmik med našimi bloki vodoravno. Za to povečajmo širino starševskega elementa, da damo dodaten prostor za odmike.

Ker imamo tri bloke v vrsti, pomeni, da sta med njima dva presledka. Recimo, da želimo, da ima vsak presledek širino 10px. Izkazalo se bo, da je treba širino starševskega elementa povečati za 20px, torej narediti ne 300px, ampak 320px.

Zdaj nastavimo starševskemu elementu blokov justify-content na vrednost space-between in dobimo želeni razmik med bloki:

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

Результат:

Zdaj dodajmo enak razmik med bloki tudi navpično. Za to lahko nastavimo lastnost align-content na vrednost space-between.

Za to pa je treba nastaviti višino starševskemu elementu, drugače align-content ne bo deloval. Nastavimo višino na 320px. V tem primeru se nam bo pravkar prileglo tri vrste blokov po 100px višine plus dva odmika med vrstami po 10px.

Zaženimo:

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

Результат:

Vse deluje čudovito, vendar so nekatere težave, ki jih bomo obravnavali v naslednji lekciji.