Dlaždice pomocou flexboxov v CSS

Poďme sa teraz naučiť vytvárať dlaždice pomocou flexboxov. Najprv usporiadajme flex bloky do niekoľkých radov, po tri bloky v rade.

Aby sme to dosiahli, nastavme rodičovskému kontajneru šírku na 300px a flex-wrap na hodnotu wrap, a potomkom šírku 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;
}

Результат:

Teraz pridajme medzery medzi našimi blokmi v horizontálnom smere. Preto zvýšime šírku rodičovského kontajnera, aby sme vytvorili priestor pre odsadenia.

Keďže máme tri bloky v rade, znamená to, že medzi nimi sú dve medzery. Povedzme, že chceme, aby každá medzera mala šírku 10px. To znamená, že šírku rodičovského kontajnera je potrebné zvýšiť o 20px, t.j. nastaviť ju nie na 300px, ale na 320px.

Nastavme teraz rodičovskému kontajneru justify-content na hodnotu space-between a dosiahnime požadovanú medzeru medzi blokmi:

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

Результат:

Pridajme teraz rovnakú medzeru medzi blokmi aj vo vertikálnom smere. Na to môžeme nastaviť vlastnosť align-content na hodnotu space-between.

Na to je však potrebné nastaviť výšku rodičovskému kontajneru, inak align-content nebude fungovať. Nastavme výšku na 320px. V takom prípade sa nám zmestia práve tri rady blokov s výškou 100px plus dve medzery medzi radmi s výškou 10px.

Spustime kód:

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

Результат:

Všetko funguje výborne, ale existujú určité problémy, ktoré preskúmame v nasledujúcej lekcii.