Płytki flexbox w CSS

Nauczmy się teraz tworzyć układ płytek za pomocą flexboxów. Na początku ustawmy kontenery flex w kilka rzędów, po trzy bloki w rzędzie.

Aby to zrobić, ustawmy rodzicowi flexów szerokość na 300px i flex-wrap na wartość wrap, a potomkom szerokość 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;
}

Результат:

Dodajmy teraz odstępy między naszymi blokami w poziomie. Aby to zrobić, zwiększmy szerokość rodzica, aby dać dodatkowe miejsce na marginesy.

Ponieważ mamy trzy bloki w rzędzie, oznacza to, że między nimi są dwie przerwy. Załóżmy, że chcemy, aby każda przerwa miała szerokość 10px. Okaże się, że szerokość rodzica trzeba zwiększyć o 20px, czyli zrobić nie 300px, a 320px.

Ustawmy teraz rodzicowi bloków justify-content na wartość space-between i otrzymamy pożądany odstęp między blokami:

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

Результат:

Dodajmy teraz taki sam odstęp między blokami również w pionie. Aby to zrobić, można ustawić właściwość align-content na wartość space-between.

Aby to jednak zrobić, trzeba ustawić wysokość rodzicowi, inaczej align-content nie będzie działać. Ustawmy wysokość na 320px. W tym przypadku zmieszczą się dokładnie trzy rzędy bloków o wysokości 100px plus dwa marginesy między rzędami po 10px.

Uruchommy to:

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

Результат:

Wszystko działa wspaniale, ale są pewne problemy, które omówimy w następnej lekcji.