CSS Flexbox csempe elrendezés

Most pedig tanuljuk meg, hogyan készítsünk csempe elrendezést flexboxokkal. Először helyezzük el a flex elemeket több sorba, három blokk minden sorban.

Ehhez a flex szülő elem szélességét állítsuk 300px-re és a flex-wrap értékét wrap-­re, a gyermek elemek szélességét pedig 100px-­ra:

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

Результат:

Most tegyünk vízszintes távolságot a blokkok közé. Ehhez növeljük meg a szülő elem szélességét, hogy helyet adjunk a margóknak.

Mivel három blokk van egy sorban, az azt jelenti, hogy köztük két rés van. Tegyük fel, hogy minden rés 10px széles legyen. Ez azt jelenti, hogy a szülő szélességét 20px-­vel kell növelnünk, azaz ne 300px legyen, hanem 320px.

Most állítsuk a blokkok szülőjének justify-content értékét space-between-­re, és megkapjuk a kívánt távolságot a blokkok között:

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

Результат:

Most adjunk hozzá ugyanekkora távolságot a blokkok között függőlegesen is. Ehhez állítsuk a align-content tulajdonságot space-between értékre.

Ehhez azonban meg kell adnunk magasságot a szülőnek, különben a align-content nem fog működni. Állítsuk a magasságot 320px-­re. Ebben az esetben pont elférnek három sor blokk, mind 100px magas, plusz két 10px-­es rés a sorok között.

Futtassuk le:

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

Результат:

Minden remekül működik, de van néhány probléma, amelyet a következő leckében megvizsgálunk.