align-items w flexbox

Flexbox to potężne i elastyczne narzędzie do układania elementów w CSS3, pozwalające na efektywne zarządzanie przestrzenią między i wokół elementów kontenera. Jedną z kluczowych właściwości w Flexbox jest align-items, która kontroluje wyrównanie elementów wzdłuż osi pionowej (krzyżowej) kontenera. W tej lekcji przyjrzymy się różnym wartościom align-items i zobaczymy, jak mogą być wykorzystane do osiągnięcia różnych efektów wizualnych.

Przykład kodu: align-items w akcji

Poniższy przykład pokazuje kompletny plik HTML z różnymi ustawieniami align-items. Dla każdej wartości align-items, utworzony jest oddzielny kontener flex z elementami wewnątrz, aby zilustrować, jak poszczególne ustawienia wpływają na wyrównanie elementów.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Właściwość align-items w Flexbox</title>
    <style>
        .flex-container {
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 200px;
            margin-bottom: 20px;
            border: 2px solid #000;
        }
        .flex-item {
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        /* Zmiana wartości align-items dla kolejnych kontenerów */
        .flex-start { align-items: flex-start; }
        .flex-end { align-items: flex-end; }
        .center { align-items: center; }
        .baseline { align-items: baseline; }
        .stretch { align-items: stretch; }
    </style>
</head>
<body>
    <div class="flex-container flex-start">
        <div class="flex-item"></div>
        <div class="flex-item" style="height: 50px;">Start</div>
        <div class="flex-item"></div>
    </div>

    <div class="flex-container flex-end">
        <div class="flex-item"></div>
        <div class="flex-item" style="height: 50px;">Koniec</div>
        <div class="flex-item"></div>
    </div>

    <div class="flex-container center">
        <div class="flex-item"></div>
        <div class="flex-item" style="height: 50px;">Centrum</div>
        <div class="flex-item"></div>
    </div>

    <div class="flex-container baseline">
        <div class="flex-item"></div>
        <div class="flex-item" style="height: 50px;">Baseline</div>
        <div class="flex-item"></div>
    </div>

    <div class="flex-container stretch">
        <div class="flex-item" style="height: auto;">Stretch</div>
        <div class="flex-item" style="height: auto;"></div>
        <div class="flex-item" style="height: auto;"></div>
    </div>
</body>
</html>

Opis wartości align-items

  • flex-start: Elementy są wyrównane do górnej krawędzi kontenera.
  • flex-end: Elementy są wyrównane do dolnej krawędzi kontenera.
  • center: Elementy są wyrównane do środka kontenera w pionie.
  • baseline: Elementy są wyrównane względem linii bazowej tekstu.
  • stretch: Domyślna wartość. Elementy są rozciągnięte, aby wypełnić kontener w pionie, jeśli nie mają określonej wysokości.

Podsumowanie

Właściwość align-items w Flexbox jest niezwykle użytecznym narzędziem do precyzyjnego kontrolowania wyrównania elementów wewnątrz kontenera flex. Pozwala na łatwe dostosowanie układu elementów do potrzeb projektu, co czyni Flexbox jednym z najbardziej elastycznych i potężnych narzędzi do układania elementów w CSS. Dzięki zrozumieniu i stosowaniu różnych wartości align-items, deweloperzy mogą efektywnie zarządzać położeniem elementów w kontenerze flex, tworząc responsywne i estetycznie przyjemne układy stron internetowych.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs WebDevelopera od podstaw w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Poprzedni
Następny
Scroll to Top