CSS Flex to jedno z najważniejszych narzędzi w tworzeniu nowoczesnych, responsywnych i elastycznych układów stron internetowych. Dzięki niemu możemy w prosty sposób kontrolować pozycjonowanie elementów na stronie, dostosowując je do różnych rozmiarów ekranów i urządzeń. # html css flex # css with class
Wprowadzenie do CSS Flexbox
CSS Flexbox, czyli Flexible Box Layout Module, wprowadza nowy sposób układania elementów na stronie. Pozwala na łatwe rozmieszczanie i wyrównywanie elastycznych elementów zarówno w osi pionowej, jak i poziomej, bez konieczności stosowania floatów czy skomplikowanych układów.
Podstawowe pojęcia: kontener flex i elementy flex
Aby rozpocząć pracę z Flexboxem, musimy zdefiniować kontener flex oraz elementy flex. Kontener flex to element nadrzędny, w którym umieszczone są elementy flex – bezpośrednie dzieci kontenera.
Kontener flex
Aby stworzyć kontener flex, należy ustawić właściwość display na wartość flex lub inline-flex.
.kontener {
display: flex;
}Elementy flex
Elementy wewnątrz kontenera automatycznie stają się elementami flex i podlegają zasadom Flexboxa.
# html css flex # css with class
Właściwości kontenera flex
Kontener flex posiada szereg właściwości, które pozwalają kontrolować układ elementów flex.
flex-direction
Właściwość flex-direction określa kierunek, w jakim układają się elementy flex w kontenerze flex.
row (domyślnie) – elementy flex w poziomie od lewej do prawej.
row-reverse – elementy flex w poziomie od prawej do lewej.
column – elementy flex w pionie od góry do dołu.
column-reverse – elementy flex w pionie od dołu do góry.
.kontener {
flex-direction: row;
}flex-wrap
Właściwość flex-wrap decyduje, czy elementy flex mają zawijać się, gdy zabraknie miejsca w kontenerze flex.
nowrap (domyślnie) – elementy nie zawijają się.
wrap – elementy zawijają się do następnego wiersza lub kolumny.
wrap-reverse – elementy zawijają się w odwrotnym kierunku.
.kontener {
flex-wrap: wrap;
}flex-flow
Właściwość flex-flow jest skrótem łączącym flex-direction i flex-wrap.
.kontener {
flex-flow: row wrap;
}justify-content
Właściwość justify-content pozwala na wyrównanie elementów flex w poziomie wzdłuż głównej osi kontenera flex.
flex-start (domyślnie) – elementy przyklejone do początku.
flex-end – elementy przyklejone do końca.
center – elementy wyśrodkowane.
space-between – elementy rozłożone z równymi odstępami między nimi.
space-around – elementy z równymi odstępami wokół nich.
space-evenly – elementy z równymi odstępami między i wokół nich.
.kontener {
justify-content: center;
}align-items
Właściwość align-items kontroluje wyrównanie elementów flex w pionie wzdłuż osi poprzecznej.
stretch (domyślnie) – elementy rozciągają się, aby wypełnić kontener.
flex-start – elementy wyrównane do początku osi.
flex-end – elementy wyrównane do końca osi.
center – elementy wyśrodkowane.
baseline – elementy wyrównane do linii bazowej tekstu.
.kontener {
align-items: center;
}align-content
Właściwość align-content kontroluje rozmieszczenie linii, gdy mamy wiele linii elementów flex (przy zastosowaniu flex-wrap).
flex-start
flex-end
center
space-between
space-around
stretch (domyślnie)
.kontener {
align-content: space-between;
}Właściwości elementów flex
Elementy flex mogą być kontrolowane za pomocą następujących właściwości:
flex-grow
Właściwość flex-grow określa, jak bardzo element flex może rosnąć w stosunku do innych, gdy jest wolne miejsce.
.element {
flex-grow: 1;
}flex-shrink
Właściwość flex-shrink określa, jak element flex będzie się kurczył, gdy brakuje miejsca.
.element {
flex-shrink: 1;
}flex-basis
Właściwość flex-basis definiuje początkowy rozmiar elementu flex przed rozdzieleniem przestrzeni.
.element {
flex-basis: 200px;
}flex
Właściwość flex jest skrótem łączącym flex-grow, flex-shrink i flex-basis.
.element {
flex: 1 1 200px;
}align-self
Właściwość align-self pozwala nadpisać wartość align-items dla pojedynczego elementu flex.
.element {
align-self: flex-end;
}Dodatkowe właściwości
gap, row-gap, column-gap
Właściwość gap umożliwia ustawienie odstępów między elastycznymi elementami w kontenerze flex.
.kontener {
gap: 20px;
}Można też użyć row-gap i column-gap osobno.
.kontener {
row-gap: 20px;
column-gap: 10px;
}Pozycjonowanie flex
Dzięki Flexboxowi pozycjonowanie flex staje się intuicyjne. Możemy łatwo manipulować układem, dostosowując go do potrzeb projektu.
Praktyczne zastosowanie Flexbox
Przykład 1: Menu nawigacyjne
HTML:
<nav class="menu">
<a href="#">Strona główna</a>
<a href="#">O nas</a>
<a href="#">Usługi</a>
<a href="#">Kontakt</a>
</nav>CSS:
.menu {
display: flex;
justify-content: space-around;
align-items: center;
}Przykład 2: Galeria obrazów
HTML:
<div class="galeria">
<img src="obraz1.jpg" alt="Obraz 1">
<img src="obraz2.jpg" alt="Obraz 2">
<img src="obraz3.jpg" alt="Obraz 3">
</div>CSS:
.galeria {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.galeria img {
flex-basis: 30%;
flex-grow: 1;
}Zastosowanie właściwości flexbox w praktyce
Znajomość właściwości flexbox pozwala na tworzenie zaawansowanych układów bez skomplikowanego kodu. Dzięki temu możemy tworzyć strony bardziej efektywnie.
Porównanie Flexbox z innymi metodami
Flexbox wprowadza wiele ułatwień w porównaniu z tradycyjnymi metodami układania elementów.
Elastyczność: Elastyczne elementy dostosowują się do dostępnej przestrzeni.
Responsywność: Układy łatwo dostosowują się do różnych rozdzielczości.
Prostota: Mniej kodu w porównaniu z floatami czy układami tabelarycznymi.
Przydatne linki
CSS-Tricks – Kompletny przewodnik po Flexbox
Podsumowanie
CSS Flexbox to potężne narzędzie do tworzenia elastycznych układów na stronach internetowych. Dzięki właściwościom takim jak flex-grow, justify-content, align-items, flex-shrink, flex-basis, flex-wrap, align-content, align-self i innym, możemy łatwo kontrolować pozycjonowanie flex elementów w naszych projektach. Pamiętaj, że kontener flex i elementy flex to podstawowe elementy pracy z Flexboxem, a znajomość ich właściwości pozwoli Ci tworzyć responsywne i atrakcyjne strony.
# html css flex # css with class
