Flexbox — CSS — kod. pyk

Flexbox rozmieszcza elementy w jednym głównym kierunku.

Jak to działa?

display: flex włącza układ elastyczny. gap definiuje odstępy, align-items wyrównuje w osi poprzecznej, a justify-content w głównej.

Przykład 1 — poznaj zapis

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

Elementy w pasku narzędzi ułożą się w jednym wierszu, jeśli jest na to miejsce.

Przeczytaj kod linijka po linijce

.toolbar {Wybieramy elementy, które mają otrzymać podane style.
display: flex;Ustawiamy sposób rozmieszczania elementów.
align-items: center;Przypisujemy wartość wybranej właściwości CSS.

Oczekiwany wynik / efektpo uruchomieniu przykładu

Elementy toolbar są ustawione poziomo, z odstępem między nimi.

◉Podgląd w przeglądarceHTML/CSS — bez uruchamiania skryptów

Przykład 2 — podobny problem, inne dane

Teraz przyjrzyj się drugiemu przykładowi. Zwróć uwagę na to, co zmieniło się w kodzie, a co w wyniku. Spróbuj przewidzieć rezultat przed przeczytaniem odpowiedzi.

.row { display: flex; gap: 1rem; } .row > * { flex: 1; }

Wynik drugiego przykładupo uruchomieniu przykładu

Elementy w jednym rzędzie otrzymują równą szerokość.

◉Podgląd w przeglądarceHTML/CSS — bez uruchamiania skryptów

Sprawdź, czy rozumiesz

Wróć do pierwszego przykładu, zmień jedną wartość i spróbuj samodzielnie przewidzieć wynik. Następnie uruchom kod i porównaj rezultat. W ten sposób nauczysz się nie tylko przepisywać instrukcje, ale rozumieć ich działanie.

Spróbuj samodzielnie

Dodaj flex-wrap: wrap i sprawdź wąskie ekrany.