Kurs HTML

Problem tradycyjnych metod układu

Przed wprowadzeniem Flexboxa i Grida, tworzenie złożonych, elastycznych i responsywnych układów stron internetowych za pomocą CSS było często trudne i wymagało stosowania "hacków" lub obejść. Metody oparte na float, position czy display: table miały swoje ograniczenia, szczególnie w kontekście wyrównywania elementów, zmiany ich kolejności czy równego rozkładania przestrzeni.

Flexbox: Elastyczny Model Pudełkowy

Flexbox (Flexible Box Layout Module) to jednowymiarowy model układu w CSS, zaprojektowany do efektywnego rozmieszczania, wyrównywania i rozdzielania przestrzeni między elementami w kontenerze, nawet gdy ich rozmiar jest nieznany lub dynamiczny.

Główną ideą Flexboxa jest nadanie kontenerowi zdolności do modyfikowania szerokości/wysokości i kolejności swoich elementów potomnych (zwanych elementami flex), aby jak najlepiej wypełnić dostępną przestrzeń.

Flexbox jest modelem **jednowymiarowym**, co oznacza, że elementy układane są głównie wzdłuż jednej osi – poziomej (wiersz) lub pionowej (kolumna).

Podstawowe Koncepcje Flexboxa

Aby zrozumieć Flexbox, kluczowe jest poznanie dwóch podstawowych składników i dwóch osi:

1. Kontener Flex (Flex Container):

   To element nadrzędny, na którym aktywujemy model Flexbox, ustawiając jego właściwość display na flex lub inline-flex.

   Kontener staje się "elastycznym pudełkiem", a jego bezpośrednie dzieci automatycznie stają się elementami flex.

   <div class="flex-container">
     <div class="flex-item">Element 1</div>
     <div class="flex-item">Element 2</div>
     <div class="flex-item">Element 3</div>
   </div>Kopiuj

   .flex-container {
     display: flex; /* Aktywacja Flexboxa */
     border: 2px solid blue; /* Dla wizualizacji */
     padding: 10px;
   }
   
   .flex-item {
     background-color: lightblue;
     padding: 20px;
     margin: 5px;
     border: 1px solid navy;
   }
   Kopiuj

2. Elementy Flex (Flex Items):

   To bezpośrednie dzieci kontenera flex. Zaczynają one podlegać regułom układu Flexbox.

   Możemy kontrolować ich rozmiar, kolejność i wyrównanie za pomocą specjalnych właściwości stosowanych bezpośrednio do nich lub do kontenera.

3. Oś Główna (Main Axis):

   Główna oś, wzdłuż której układane są elementy flex. Domyślnie jest to oś **pozioma** (od lewej do prawej).

   Kierunek osi głównej można zmienić za pomocą właściwości flex-direction (np. na pionowy).

   Początek osi głównej nazywa się main start, a koniec main end.

   Rozmiar elementu wzdłuż osi głównej to main size.

4. Oś Poprzeczna (Cross Axis):

   Oś prostopadła do osi głównej. Jeśli oś główna jest pozioma, oś poprzeczna jest **pionowa** (domyślnie od góry do dołu).

   Początek osi poprzecznej nazywa się cross start, a koniec cross end.

   Rozmiar elementu wzdłuż osi poprzecznej to cross size.

(Uwaga: Obrazek `flexbox-axes.png` jest przykładowy i musiałby zostać dodany do projektu.)

Zrozumienie tych czterech koncepcji jest fundamentem do pracy z właściwościami Flexboxa, które pozwalają kontrolować kierunek, zawijanie, wyrównanie i elastyczność elementów.

Dlaczego Flexbox jest użyteczny?

• Proste wyrównanie: Łatwe centrowanie elementów w pionie i poziomie, wyrównywanie do krawędzi, rozkładanie przestrzeni.
• Elastyczność: Elementy mogą automatycznie rosnąć lub kurczyć się, aby dopasować się do dostępnej przestrzeni.
• Zmiana kolejności: Możliwość wizualnej zmiany kolejności elementów bez modyfikowania struktury HTML (za pomocą właściwości order).
• Układy jednowymiarowe: Idealny do tworzenia komponentów interfejsu, takich jak nawigacje, paski narzędzi, listy kart, gdzie elementy układane są głównie w jednym kierunku (wiersz lub kolumna).
• Responsywność: Ułatwia tworzenie układów, które dobrze adaptują się do różnych rozmiarów ekranu.