Czym jest Flexbox?

Flexbox (Elastyczny Układ Pudełkowy) to jednowymiarowy model układu w CSS, który służy do rozdzielania miejsca między elementami w kontenerze i oferuje potężne możliwości wyrównania. Umożliwia łatwe zarządzanie rozmiarami, kolejnością i wyrównaniem elementów potomnych (elementów flex) wewnątrz kontenera nadrzędnego (kontenera flex), niezależnie od ich pierwotnego porządku lub rozmiaru.

Kluczowe koncepcje Flexbox:

• Kontener flex: Element z display: flex lub display: inline-flex. To w tym kontenerze określane są zasady układu dla jego bezpośrednich elementów potomnych.
• Elementy flex: Bezpośrednie elementy potomne kontenera flex. Do nich stosuje się właściwości Flexbox, które określają ich zachowanie w kontenerze.
• Oś główna (main axis): Oś, wzdłuż której rozmieszczone są elementy flex. Domyślnie jest pozioma (od lewej do prawej), ale może być zmieniona za pomocą flex-direction.
• Oś poprzeczna (cross axis): Oś prostopadła do osi głównej.
• Początek główny (main start) / Koniec główny (main end): Początek i koniec wzdłuż osi głównej.
• Początek poprzeczny (cross start) / Koniec poprzeczny (cross end): Początek i koniec wzdłuż osi poprzecznej.

Główne właściwości Flexbox dla kontenera flex:

• display: Określa, że element jest kontenerem flex (flex lub inline-flex).
• flex-direction: Określa kierunek osi głównej (row, row-reverse, column, column-reverse).
• flex-wrap: Określa, czy elementy flex będą zawijać się do nowego wiersza/kolumny, jeśli zabraknie miejsca (nowrap, wrap, wrap-reverse).
• justify-content: Wyrównuje elementy flex wzdłuż osi głównej (flex-start, flex-end, center, space-between, space-around, space-evenly).
• align-items: Wyrównuje elementy flex wzdłuż osi poprzecznej (flex-start, flex-end, center, baseline, stretch).
• align-content: Wyrównuje linie elementów flex (jeśli jest ich kilka z powodu flex-wrap) wzdłuż osi poprzecznej.

Główne właściwości Flexbox dla elementów flex:

• order: Określa kolejność wyświetlania elementu flex (domyślnie 0).
• flex-grow: Współczynnik wzrostu elementu flex, określający, jak bardzo może się powiększyć, aby wypełnić dostępne miejsce.
• flex-shrink: Współczynnik kurczenia elementu flex, określający, jak bardzo może się zmniejszyć, aby uniknąć przepełnienia.
• flex-basis: Początkowy rozmiar elementu flex przed rozdzieleniem wolnej przestrzeni.
• flex: Skrót dla flex-grow, flex-shrink i flex-basis.
• align-self: Nadpisuje align-items dla konkretnego elementu flex.

Przykład użycia:

HTML:

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

CSS:

.flex-container {
  display: flex; /* Ustawia kontener jako flex */
  justify-content: center; /* Wyrównuje elementy do środka osi głównej */
  align-items: center; /* Wyrównuje elementy do środka osi poprzecznej */
  height: 200px; /* Dla demonstracji wyrównania */
  border: 1px solid black;
}

.flex-item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 10px;
}

Główne zalety Flexbox:

• Łatwe wyrównanie elementów w poziomie i pionie.
• Elastyczne rozłożenie przestrzeni między elementami.
• Łatwa zmiana kolejności elementów.
• Responsywny design bez użycia float i position.
• Dobre wsparcie w nowoczesnych przeglądarkach.