CSS- podstawy flexboxa i jego wykorzystanie do budowy układu głównych elementów strony
CSS- podstawy flexboxa i jego wykorzystanie do budowy układu głównych elementów strony
Flexbox (Flexible Box Layout) to moduł CSS służący do tworzenia elastycznych układów elementów w jednym wymiarze:
- poziomym (row) lub
- pionowym (column).
Podstawowe pojęcia
- flex container – element nadrzędny (
display: flex), - flex items – elementy potomne kontenera,
- oś główna (main axis) i oś poprzeczna (cross axis).
Aktywacja Flexboxa
.container {
display: flex;
}
Po tej deklaracji wszystkie dzieci kontenera stają się elementami flex.
Właściwości kontenera flex
flex-direction – kierunek osi głównej
row(domyślnie) – poziomo,row-reverse,column– pionowo,column-reverse.
.container {
display: flex;
flex-direction: row;
}
justify-content – wyrównanie wzdłuż osi głównej
flex-start,center,flex-end,space-between,space-around,space-evenly.
align-items – wyrównanie wzdłuż osi poprzecznej
stretch(domyślnie),center,flex-start,flex-end.
flex-wrap – zawijanie elementów
nowrap(domyślnie),wrap.
.container {
display: flex;
flex-wrap: wrap;
}
Właściwości elementów flex
flex-grow – rozciąganie elementów
Określa, jak bardzo element może się rozciągnąć względem innych.
.item {
flex-grow: 1;
}
flex-shrink – zmniejszanie elementów
Decyduje, jak element reaguje na brak miejsca.
flex-basis – rozmiar początkowy
Określa bazowy rozmiar elementu.
Skrócona właściwość flex
.item {
flex: 1 1 200px;
}
Budowa prostego układu strony z Flexboxem
Struktura HTML
<div class=„page”>
<header>Header</header>
<div class=„content”>
<main>Main</main>
<aside>Sidebar</aside>
</div>
<footer>Footer</footer>
</div>
CSS – układ strony
.page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content {
display: flex;
flex: 1;
}
main {
flex: 3;
}
aside {
flex: 1;
}
Efekt:
- nagłówek u góry,
- stopka na dole,
- treść główna i pasek boczny obok siebie.
Flexbox a responsywność
Flexbox umożliwia łatwe dostosowanie układu do różnych ekranów:
@media (max-width: 768px) {
.content {
flex-direction: column;
}
}
Na małych ekranach sidebar ustawia się pod treścią.
Ćwiczenie 1
- Utwórz kontener flex z trzema elementami i wyrównaj je:
- na środku,
- z równymi odstępami.
- Zbuduj layout: header – main – footer.
- Dodaj sidebar i spraw, aby na telefonie był pod treścią.
Ćwiczenie 2 i 3
- Zbuduj prostą stronę z nagłówkiem, menu, treścią i stopką przy użyciu Flexboxa.
- Przygotuj krótką notatkę: Dlaczego Flexbox jest lepszy niż float?
Przydatny link:
