CodeWorlds

Kurs HTML i CSS · Moduł 4: Flexbox

Align content

6 min czytania ·
W tej lekcji11

Właściwość "align-content" w modelu Flexbox pozwala na kontrolowanie rozmieszczenia wzdłuż osi poprzecznej (cross-axis) dla wielu wierszy elementów w kontenerze. Działa tylko wtedy, gdy elementy zajmują więcej miejsca niż jest dostępne na osi poprzecznej.

Oto kilka przykładów wartości właściwości "align-content":

  • Właściwość "flex-start" - elementy są rozmieszczone na początku osi poprzecznej kontenera.
  • Właściwość "flex-end" - elementy są rozmieszczone na końcu osi poprzecznej kontenera.
  • Właściwość "center" - elementy są wyśrodkowane wzdłuż osi poprzecznej kontenera.
  • Właściwość "space-between" - elementy są równomiernie rozmieszczone na osi poprzecznej, z równym odstępem między nimi. Pierwszy element jest przy początku osi, a ostatni przy końcu osi.
  • Właściwość "space-around" - elementy są równomiernie rozmieszczone na osi poprzecznej, z równym odstępem między nimi oraz po obu stronach. Oznacza to, że odstęp między elementami jest większy niż odstęp przy krawędziach kontenera.
  • Właściwość "space-evenly" - elementy są równomiernie rozmieszczone na osi poprzecznej, tak aby odstępy między nimi (i od krawędzi) były równe.

Przykładem użycia "align-content" może być sytuacja, gdy mamy kontener Flexbox z wieloma wierszami elementów i chcemy kontrolować ich rozmieszczenie wzdłuż osi poprzecznej. Możemy wybrać odpowiednią wartość właściwości "align-content", aby uzyskać pożądany układ, który jest estetyczny i funkcjonalny dla danej strony internetowej.

Ćwiczenie: Dopasowanie elementów za pomocą align-content

W tym ćwiczeniu nauczysz się, jak używać właściwości align-content w modelu Flexbox, aby precyzyjnie kontrolować rozmieszczenie elementów wzdłuż osi poprzecznej (cross-axis) dla wielu wierszy elementów w kontenerze. Twoim zadaniem będzie utworzenie strony internetowej z kontenerami, które będą rozmieszczane w różnych układach za pomocą tej właściwości.

Krok 1: Stwórz podstawową strukturę dokumentu HTML

Najpierw stwórz nowy plik HTML i dodaj podstawową strukturę dokumentu HTML. Dodaj element <section> z kilkoma elementami <div> w ciele dokumentu (<body>).

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css"> <!-- Podłącz plik CSS -->
  <title>Dopasowanie elementów za pomocą align-content</title>
</head>
<body>
  <section class="container flex-start">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
  </section>
  <section class="container flex-end">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
  </section>
  <section class="container center">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
  </section>
  <section class="container space-between">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
  </section>
  <section class="container space-around">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
  </section>
  <section class="container space-evenly">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
  </section>
</body>
</html>

Krok 2: Stwórz plik CSS

Otwórz lub utwórz nowy plik CSS i zapisz go jako styles.css.

Krok 3: Stylizacja podstawowa

Dodaj podstawowe style dla elementów <section> i <div>, aby były widoczne na stronie.

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin: 0;
  padding: 20px;
}

.container {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #000;
  padding: 10px;
  width: 80%;
  height: 200px;
  margin: 10px 0;
}

.container div {
  background-color: lightblue;
  margin: 5px;
  padding: 20px;
  text-align: center;
  flex: 1 1 30%;
}

Krok 4: Układ z align-content: flex-start

Dodaj styl dla klasy .flex-start, aby ustawić elementy na początku osi poprzecznej.

/* Układ z align-content: flex-start */
.flex-start {
  align-content: flex-start;
}

Krok 5: Układ z align-content: flex-end

Dodaj styl dla klasy .flex-end, aby ustawić elementy na końcu osi poprzecznej.

/* Układ z align-content: flex-end */
.flex-end {
  align-content: flex-end;
}

Krok 6: Układ z align-content: center

Dodaj styl dla klasy .center, aby wyśrodkować elementy wzdłuż osi poprzecznej.

/* Układ z align-content: center */
.center {
  align-content: center;
}

Krok 7: Układ z align-content: space-between

Dodaj styl dla klasy .space-between, aby równomiernie rozmieszczać elementy na osi poprzecznej, z równym odstępem między nimi.

/* Układ z align-content: space-between */
.space-between {
  align-content: space-between;
}

Krok 8: Układ z align-content: space-around

Dodaj styl dla klasy .space-around, aby równomiernie rozmieszczać elementy na osi poprzecznej, z równym odstępem wokół nich.

/* Układ z align-content: space-around */
.space-around {
  align-content: space-around;
}

Krok 9: Układ z align-content: space-evenly

Dodaj styl dla klasy .space-evenly, aby równomiernie rozmieszczać elementy na osi poprzecznej, z równymi odstępami między nimi i krawędziami kontenera.

/* Układ z align-content: space-evenly */
.space-evenly {
  align-content: space-evenly;
}

Wynik

Po wykonaniu wszystkich kroków twój plik HTML i CSS powinny wyglądać następująco:

Plik HTML (index.html)

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css"> <!-- Podłącz plik CSS -->
  <title>Dopasowanie elementów za pomocą align-content</title>
</head>
<body>
  <section class="container flex-start">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
  </section>
  <section class="container flex-end">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
  </section>
  <section class="container center">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
  </section>
  <section class="container space-between">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
  </section>
  <section class="container space-around">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
  </section>
  <section class="container space-evenly">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
  </section>
</body>
</html>

Plik CSS (styles.css)

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin: 0;
  padding: 20px;
}

.container {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #000;
  padding: 10px;
  width: 80%;
  height: 200px;
  margin: 10px 0;
}

.container div {
  background-color: lightblue;
  margin: 5px;
  padding: 20px;
  text-align: center;
  flex: 1 1 30%;
}

/* Układ z align-content: flex-start */
.flex-start {
  align-content: flex-start;
}

/* Układ z align-content: flex-end */
.flex-end {
  align-content: flex-end;
}

/* Układ z align-content: center */
.center {
  align-content: center;
}

/* Układ z align-content: space-between */
.space-between {
  align-content: space-between;
}

/* Układ z align-content: space-around */
.space-around {
  align-content: space-around;
}

/* Układ z align-content: space-evenly */
.space-evenly {
  align-content: space-evenly;
}

Zadanie dodatkowe

  1. Dodaj więcej sekcji z różnymi wartościami align-content, aby lepiej zrozumieć, jak działają różne opcje.
  2. Spróbuj dodać więcej stylów do swojej strony, np. zmieniając kolory, rozmiary i inne właściwości elementów, aby lepiej zrozumieć, jak działają różne opcje.
  3. Przetestuj swoje umiejętności, tworząc bardziej złożone układy z użyciem różnych kombinacji właściwości Flexbox.

Po wykonaniu tego ćwiczenia powinieneś lepiej rozumieć, jak używać właściwości align-content w modelu Flexbox, aby precyzyjnie kontrolować rozmieszczenie elementów wzdłuż osi poprzecznej.

Kod do tej lekcji: index.html
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox - Flex Direction</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Flex Direction - Kierunek układu</h1>
        <p class="subtitle">Określ główną oś kontenera flex</p>

        <section class="demo-section">
            <h2>flex-direction: row (domyślnie)</h2>
            <div class="flex-container dir-row">
                <div class="flex-item">1</div>
                <div class="flex-item">2</div>
                <div class="flex-item">3</div>
                <div class="flex-item">4</div>
            </div>
            <p class="description">Elementy ułożone w wierszu od lewej do prawej (→)</p>
        </section>

        <section class="demo-section">
            <h2>flex-direction: row-reverse</h2>
            <div class="flex-container dir-row-reverse">
                <div class="flex-item">1</div>
                <div class="flex-item">2</div>
                <div class="flex-item">3</div>
                <div class="flex-item">4</div>
            </div>
            <p class="description">Elementy ułożone w wierszu od prawej do lewej (←)</p>
        </section>

        <section class="demo-section">
            <h2>flex-direction: column</h2>
            <div class="flex-container dir-column">
                <div class="flex-item">1</div>
                <div class="flex-item">2</div>
                <div class="flex-item">3</div>
                <div class="flex-item">4</div>
            </div>
            <p class="description">Elementy ułożone w kolumnie od góry do dołu (↓)</p>
        </section>

        <section class="demo-section">
            <h2>flex-direction: column-reverse</h2>
            <div class="flex-container dir-column-reverse">
                <div class="flex-item">1</div>
                <div class="flex-item">2</div>
                <div class="flex-item">3</div>
                <div class="flex-item">4</div>
            </div>
            <p class="description">Elementy ułożone w kolumnie od dołu do góry (↑)</p>
        </section>

        <section class="demo-section practice">
            <h2>Praktyka: Egipska hierarchia</h2>
            <p class="practice-description">Układamy hierarchię egipską używając flex-direction!</p>

            <div class="hierarchy-container">
                <div class="hierarchy-box">
                    <h3>Pozioma hierarchia (row)</h3>
                    <div class="hierarchy row-hierarchy">
                        <div class="rank">Faraon</div>
                        <div class="rank">Wezyr</div>
                        <div class="rank">Skryba</div>
                        <div class="rank">Chłop</div>
                    </div>
                </div>

                <div class="hierarchy-box">
                    <h3>Pionowa hierarchia (column)</h3>
                    <div class="hierarchy column-hierarchy">
                        <div class="rank">Faraon</div>
                        <div class="rank">Wezyr</div>
                        <div class="rank">Skryba</div>
                        <div class="rank">Chłop</div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</body>
</html>

Hasła z dokumentacji w tej lekcji

Widzisz błąd w tej lekcji?

Sprawdź się

Odpowiedz na pytania z tej lekcji. Wybierz odpowiedź, a od razu zobaczysz, czy jest poprawna.

  1. 1. Kiedy właściwość align-content ma efekt?

Zadania praktyczne w grze

  • Układanie w pionie

    Ułóż kroki potrzebne, aby align-content zaczął działać w kontenerze Flexbox:

Przydatne artykuły

Używamy cookies, żeby zwiększyć Twoje doświadczenia na stronie
Polityka Prywatności
OK