Sobes.tech
Pomoc w rozmowie kwalifikacyjnej
Zasoby
Przygotowanie do rozmowy kwalifikacyjnej
Zasoby
Wyszukiwanie pracy
Zasoby
Prawo
Wróć do pytania
Junior

Jak używać flexbox do układania elementów na stronie?

sobes.tech AI

Odpowiedź od AI

Flexbox (lub Elastyczny Układ Pudełkowy) to moduł CSS zaprojektowany do tworzenia elastycznych układów elementów w kontenerze, umożliwiający łatwe rozdzielanie przestrzeni i wyrównanie elementów, nawet gdy ich rozmiary są nieznane lub zmieniają się dynamicznie.

Główną koncepcją Flexbox jest kontener flex i jego elementy flex.

Właściwości dla kontenera flex (display: flex;):

  • flex-direction: Określa kierunek, w którym elementy flex są rozmieszczone w kontenerze (oś główna).

    • row (domyślnie): poziomo, od lewej do prawej.
    • row-reverse: poziomo, od prawej do lewej.
    • column: pionowo, od góry do dołu.
    • column-reverse: pionowo, od dołu do góry.

  • flex-wrap: Określa, czy elementy flex zawijają się w nową(n) linię(e), jeśli nie mieszczą się w jednej.

    • nowrap (domyślnie): wszystkie w jednej linii.
    • wrap: zawijają się w nowe linie.
    • wrap-reverse: zawijają się w nowe linie w odwrotnej kolejności.

  • justify-content: Wyrównuje elementy flex wzdłuż osi głównej.

    • flex-start (domyślnie): na początku osi głównej.
    • flex-end: na końcu osi głównej.
    • center: na środku osi głównej.
    • space-between: równomierne rozłożenie z odstępami między elementami.
    • space-around: równomierne rozłożenie z odstępami wokół elementów.
    • space-evenly: równomierne rozłożenie z równymi odstępami między i wokół elementów.

  • align-items: Wyrównuje elementy flex wzdłuż osi poprzecznej (prostopadłej do głównej).

    • stretch (domyślnie, jeśli elementy nie mają ustawionej wysokości/szerokości): rozciąga elementy na wysokość/szerokość osi poprzecznej.
    • flex-start: na początku osi poprzecznej.
    • flex-end: na końcu osi poprzecznej.
    • center: na środku osi poprzecznej.
    • baseline: wyrównanie według linii bazowej tekstu.

  • align-content: Wyrównuje linie elementów flex wzdłuż osi poprzecznej, gdy występuje zawijanie linii (flex-wrap: wrap). Działa podobnie do justify-content, ale dla linii.

    • stretch (domyślnie): rozciąga linie.
    • flex-start: linie na początku osi poprzecznej.
    • flex-end: linie na końcu osi poprzecznej.
    • center: linie na środku osi poprzecznej.
    • space-between: równomierne rozłożenie linii z odstępami między nimi.
    • space-around: równomierne rozłożenie linii z odstępami wokół nich.

  • gap, row-gap, column-gap: Ustawia odstępy między elementami flex (wartość pojedyncza lub oddzielnie dla wierszy i kolumn).

.flex-container {
  display: flex; /* Ustawia element jako kontener flex */
  flex-direction: row; /* Elementy układają się poziomo */
  flex-wrap: wrap; /* Elementy zawijają się w nową linię */
  justify-content: center; /* Elementy wyrównane do środka osi głównej */
  align-items: center; /* Elementy wyrównane do środka osi poprzecznej */
  gap: 10px; /* Odstęp 10px między elementami flex */
}

Właściwości dla elementów flex (bezpośrednie dzieci kontenera flex):

  • order: Określa kolejność wyświetlania elementu w kontenerze (domyślnie 0). Mniejsze wartości pojawiają się wcześniej.

  • flex-grow: Określa współczynnik, który decyduje, jak bardzo element flex może się rozciągać w porównaniu do innych elementów w kontenerze, zajmując dostępne miejsce. Domyślnie 0.

  • flex-shrink: Określa współczynnik, który decyduje, jak bardzo element flex może się kurczyć przy braku miejsca. Domyślnie 1.

  • flex-basis: Określa podstawowy rozmiar elementu flex przed rozdzieleniem wolnej przestrzeni. Może być w px, %, rem, auto itp. (domyślnie auto).

  • flex: Skrócona właściwość dla flex-grow, flex-shrink, flex-basis (np. flex: 1 1 0;).

  • align-self: Nadpisuje wyrównanie elementu wzdłuż osi poprzecznej, ustawione przez align-items w kontenerze. Przyjmuje te same wartości.

.flex-item {
  order: 2; /* Ten element będzie wyświetlony jako drugi, niezależnie od jego pozycji w HTML */
  flex-grow: 1; /* Ten element zajmie pozostałe miejsce */
  flex-shrink: 0; /* Ten element nie będzie się kurczyć */
  flex-basis: 100px; /* Podstawowy rozmiar 100px */
  align-self: flex-start; /* Wyrównanie tego elementu do początku osi poprzecznej */
}

.another-item {
  flex: 1 1 auto; /* Skrócona forma: grow: 1, shrink: 1, basis: auto */
}

Flexbox pozwala na tworzenie różnych układów, od prostych wyrównań po bardziej złożone, responsywne struktury, kontrolując rozkład przestrzeni i wyrównanie elementów wewnątrz kontenera.

PoprzedniaDalej