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