Rozdrobniony naleśnik

Taki układ jest często stosowany na stronach marketingowych. Może on zawierać rząd z 3 elementami, zwykle ze zdjęciem, tytułem i tekstem opisującym niektóre funkcje produktu. Na mniejszych ekranach warto je ułożyć w kolonach, a na większych rozłożyć na całej powierzchni.

Dzięki zastosowaniu flexboxa nie musisz stosować zapytań medialnych, aby dostosować położenie tych elementów po zmianie rozmiaru ekranu.

Skrót flex oznacza: flex: <flex-grow> <flex-shrink> <flex-basis>.

flex-grow Stretching

Jeśli chcesz, aby pola rozciągały się i wypełniały przestrzeń podczas przewijania do następnego wiersza, ustaw wartość <flex-grow> na 1, np.:

.parent {
  display: flex;
}

.child {
  flex: 1 1 150px;
}

Gdy zwiększasz lub zmniejszasz rozmiar ekranu, te elementy flex powiększają się i pomniejszają.

Brak rozciągania

Jeśli chcesz, aby pola wypełniały się do rozmiaru <flex-basis>, zmniejszały się w przypadku mniejszych rozmiarów, ale nie rozciągały, aby wypełnić dodatkowe miejsce, wpisz: flex: 0 1 <flex-basis>. W tym przypadku <flex-basis> to 150 pikseli:

.parent {
  display: flex;
}

.child {
  flex: 0 1 150px;
}

HTML

<div class="parent">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

CSS


        .parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.box {
  /*  Stretching: */
  flex: 1 1 150px; 
  margin: 5px;
  background: red;
  gap: 1rem;
}