Dopasowanie elementów w osi pionowej

1section {
2  display: flex;
3  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end;
4}

• Właściwość "stretch" (domyślna) - rozciąga elementy, aby wypełnić kontener, zachowując jednocześnie ewentualne ograniczenia min-width/max-width.
• Właściwość "flex-start" / "start" / "self-start" - elementy są umieszczane na początku osi poprzecznej. Różnica między nimi jest subtelna i zależy od przestrzegania reguł flex-direction lub writing-mode.
• Właściwość "flex-end" / "end" / "self-end" - elementy są umieszczane na końcu osi poprzecznej. Różnica również zależy od przestrzegania reguł flex-direction lub writing-mode.
• Właściwość "center" - elementy są wyśrodkowane na osi poprzecznej.
• Właściwość "baseline" - elementy są wyrównane na przykład względem ich linii bazowych.

Dzięki tym właściwościom możemy precyzyjnie kontrolować pozycję i wyrównanie elementów w kontenerze Flexbox, co pozwala na tworzenie estetycznych i dopasowanych układów na stronie internetowej.

Ćwiczenie: Dopasowanie elementów w osi pionowej

W tym ćwiczeniu nauczysz się, jak używać właściwości align-items w modelu Flexbox, aby precyzyjnie kontrolować pozycję i wyrównanie elementów w osi pionowej. Twoim zadaniem będzie utworzenie strony internetowej z sekcjami, które będą rozmieszczane w różnych układach za pomocą właściwości align-items.

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>).

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="styles.css"> <!-- Podłącz plik CSS -->
7  <title>Dopasowanie elementów w osi pionowej</title>
8</head>
9<body>
10  <section class="stretch">
11    <div>Element 1</div>
12    <div>Element 2</div>
13    <div>Element 3</div>
14  </section>
15  <section class="flex-start">
16    <div>Element 1</div>
17    <div>Element 2</div>
18    <div>Element 3</div>
19  </section>
20  <section class="flex-end">
21    <div>Element 1</div>
22    <div>Element 2</div>
23    <div>Element 3</div>
24  </section>
25  <section class="center">
26    <div>Element 1</div>
27    <div>Element 2</div>
28    <div>Element 3</div>
29  </section>
30  <section class="baseline">
31    <div>Element 1</div>
32    <div>Element 2</div>
33    <div>Element 3</div>
34  </section>
35</body>
36</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.

1body {
2  display: flex;
3  flex-direction: column;
4  align-items: center;
5  gap: 20px;
6  margin: 0;
7  padding: 20px;
8}
9
10section {
11  display: flex;
12  border: 1px solid #000;
13  padding: 10px;
14  width: 80%;
15  height: 200px;
16  margin: 10px 0;
17}
18
19section div {
20  background-color: lightblue;
21  margin: 5px;
22  padding: 20px;
23  text-align: center;
24  flex: 1;
25}

Krok 4: Układ z align-items: stretch

Dodaj styl dla klasy .stretch, aby rozciągnąć elementy, aby wypełnić kontener.

1/* Układ z align-items: stretch */
2.stretch {
3  align-items: stretch;
4}

Krok 5: Układ z align-items: flex-start

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

1/* Układ z align-items: flex-start */
2.flex-start {
3  align-items: flex-start;
4}

Krok 6: Układ z align-items: flex-end

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

1/* Układ z align-items: flex-end */
2.flex-end {
3  align-items: flex-end;
4}

Krok 7: Układ z align-items: center

Dodaj styl dla klasy .center, aby wyśrodkować elementy na osi poprzecznej.

1/* Układ z align-items: center */
2.center {
3  align-items: center;
4}

Krok 8: Układ z align-items: baseline

Dodaj styl dla klasy .baseline, aby wyrównać elementy względem ich linii bazowych.

1/* Układ z align-items: baseline */
2.baseline {
3  align-items: baseline;
4}

Wynik

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

Plik HTML (index.html)

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="styles.css"> <!-- Podłącz plik CSS -->
7  <title>Dopasowanie elementów w osi pionowej</title>
8</head>
9<body>
10  <section class="stretch">
11    <div>Element 1</div>
12    <div>Element 2</div>
13    <div>Element 3</div>
14  </section>
15  <section class="flex-start">
16    <div>Element 1</div>
17    <div>Element 2</div>
18    <div>Element 3</div>
19  </section>
20  <section class="flex-end">
21    <div>Element 1</div>
22    <div>Element 2</div>
23    <div>Element 3</div>
24  </section>
25  <section class="center">
26    <div>Element 1</div>
27    <div>Element 2</div>
28    <div>Element 3</div>
29  </section>
30  <section class="baseline">
31    <div>Element 1</div>
32    <div>Element 2</div>
33    <div>Element 3</div>
34  </section>
35</body>
36</html>

Plik CSS (styles.css)

1body {
2  display: flex;
3  flex-direction: column;
4  align-items: center;
5  gap: 20px;
6  margin: 0;
7  padding: 20px;
8}
9
10section {
11  display: flex;
12  border: 1px solid #000;
13  padding: 10px;
14  width: 80%;
15  height: 200px;
16  margin: 10px 0;
17}
18
19section div {
20  background-color: lightblue;
21  margin: 5px;
22  padding: 20px;
23  text-align: center;
24  flex: 1;
25}
26
27/* Układ z align-items: stretch */
28.stretch {
29  align-items: stretch;
30}
31
32/* Układ z align-items: flex-start */
33.flex-start {
34  align-items: flex-start;
35}
36
37/* Układ z align-items: flex-end */
38.flex-end {
39  align-items: flex-end;
40}
41
42/* Układ z align-items: center */
43.center {
44  align-items: center;
45}
46
47/* Układ z align-items: baseline */
48.baseline {
49  align-items: baseline;
50}

Eksperymentuj dalej

1. Dodaj więcej sekcji z różnymi wartościami align-items, 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 CSS.
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-items w modelu Flexbox, aby precyzyjnie kontrolować pozycję i wyrównanie elementów w osi pionowej.

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Flexbox - Justify Content</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <div class="container">
11        <h1>Justify Content - Rozmieszczanie po osi głównej</h1>
12        <p class="subtitle">Kontroluj rozkład elementów wzdłuż osi głównej kontenera flex</p>
13
14        <section class="demo-section">
15            <h2>justify-content: flex-start (domyślnie)</h2>
16            <div class="flex-container justify-start">
17                <div class="flex-item">1</div>
18                <div class="flex-item">2</div>
19                <div class="flex-item">3</div>
20            </div>
21            <p class="description">Elementy są wyrównane do początku kontenera</p>
22        </section>
23
24        <section class="demo-section">
25            <h2>justify-content: flex-end</h2>
26            <div class="flex-container justify-end">
27                <div class="flex-item">1</div>
28                <div class="flex-item">2</div>
29                <div class="flex-item">3</div>
30            </div>
31            <p class="description">Elementy są wyrównane do końca kontenera</p>
32        </section>
33
34        <section class="demo-section">
35            <h2>justify-content: center</h2>
36            <div class="flex-container justify-center">
37                <div class="flex-item">1</div>
38                <div class="flex-item">2</div>
39                <div class="flex-item">3</div>
40            </div>
41            <p class="description">Elementy są wycentrowane w kontenerze</p>
42        </section>
43
44        <section class="demo-section">
45            <h2>justify-content: space-between</h2>
46            <div class="flex-container justify-between">
47                <div class="flex-item">1</div>
48                <div class="flex-item">2</div>
49                <div class="flex-item">3</div>
50            </div>
51            <p class="description">Pierwszy element na początku, ostatni na końcu, równe odstępy między</p>
52        </section>
53
54        <section class="demo-section">
55            <h2>justify-content: space-around</h2>
56            <div class="flex-container justify-around">
57                <div class="flex-item">1</div>
58                <div class="flex-item">2</div>
59                <div class="flex-item">3</div>
60            </div>
61            <p class="description">Równe odstępy wokół każdego elementu</p>
62        </section>
63
64        <section class="demo-section">
65            <h2>justify-content: space-evenly</h2>
66            <div class="flex-container justify-evenly">
67                <div class="flex-item">1</div>
68                <div class="flex-item">2</div>
69                <div class="flex-item">3</div>
70            </div>
71            <p class="description">Równe odstępy między wszystkimi elementami i krawędziami</p>
72        </section>
73    </div>
74</body>
75</html>