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