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

Align content

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

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 za pomocą align-content</title>
8</head>
9<body>
10  <section class="container flex-start">
11    <div>Element 1</div>
12    <div>Element 2</div>
13    <div>Element 3</div>
14    <div>Element 4</div>
15    <div>Element 5</div>
16  </section>
17  <section class="container flex-end">
18    <div>Element 1</div>
19    <div>Element 2</div>
20    <div>Element 3</div>
21    <div>Element 4</div>
22    <div>Element 5</div>
23  </section>
24  <section class="container center">
25    <div>Element 1</div>
26    <div>Element 2</div>
27    <div>Element 3</div>
28    <div>Element 4</div>
29    <div>Element 5</div>
30  </section>
31  <section class="container space-between">
32    <div>Element 1</div>
33    <div>Element 2</div>
34    <div>Element 3</div>
35    <div>Element 4</div>
36    <div>Element 5</div>
37  </section>
38  <section class="container space-around">
39    <div>Element 1</div>
40    <div>Element 2</div>
41    <div>Element 3</div>
42    <div>Element 4</div>
43    <div>Element 5</div>
44  </section>
45  <section class="container space-evenly">
46    <div>Element 1</div>
47    <div>Element 2</div>
48    <div>Element 3</div>
49    <div>Element 4</div>
50    <div>Element 5</div>
51  </section>
52</body>
53</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
10.container {
11  display: flex;
12  flex-wrap: wrap;
13  border: 1px solid #000;
14  padding: 10px;
15  width: 80%;
16  height: 200px;
17  margin: 10px 0;
18}
19
20.container div {
21  background-color: lightblue;
22  margin: 5px;
23  padding: 20px;
24  text-align: center;
25  flex: 1 1 30%;
26}

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

Dodaj styl dla klasy 

.flex-start
, aby ustawić elementy na początku osi poprzecznej.

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

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

Dodaj styl dla klasy 

.flex-end
, aby ustawić elementy na końcu osi poprzecznej.

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

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

Dodaj styl dla klasy 

.center
, aby wyśrodkować elementy wzdłuż osi poprzecznej.

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

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.

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

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.

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

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.

1/* Układ z align-content: space-evenly */
2.space-evenly {
3  align-content: space-evenly;
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 za pomocą align-content</title>
8</head>
9<body>
10  <section class="container flex-start">
11    <div>Element 1</div>
12    <div>Element 2</div>
13    <div>Element 3</div>
14    <div>Element 4</div>
15    <div>Element 5</div>
16  </section>
17  <section class="container flex-end">
18    <div>Element 1</div>
19    <div>Element 2</div>
20    <div>Element 3</div>
21    <div>Element 4</div>
22    <div>Element 5</div>
23  </section>
24  <section class="container center">
25    <div>Element 1</div>
26    <div>Element 2</div>
27    <div>Element 3</div>
28    <div>Element 4</div>
29    <div>Element 5</div>
30  </section>
31  <section class="container space-between">
32    <div>Element 1</div>
33    <div>Element 2</div>
34    <div>Element 3</div>
35    <div>Element 4</div>
36    <div>Element 5</div>
37  </section>
38  <section class="container space-around">
39    <div>Element 1</div>
40    <div>Element 2</div>
41    <div>Element 3</div>
42    <div>Element 4</div>
43    <div>Element 5</div>
44  </section>
45  <section class="container space-evenly">
46    <div>Element 1</div>
47    <div>Element 2</div>
48    <div>Element 3</div>
49    <div>Element 4</div>
50    <div>Element 5</div>
51  </section>
52</body>
53</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
10.container {
11  display: flex;
12  flex-wrap: wrap;
13  border: 1px solid #000;
14  padding: 10px;
15  width: 80%;
16  height: 200px;
17  margin: 10px 0;
18}
19
20.container div {
21  background-color: lightblue;
22  margin: 5px;
23  padding: 20px;
24  text-align: center;
25  flex: 1 1 30%;
26}
27
28/* Układ z align-content: flex-start */
29.flex-start {
30  align-content: flex-start;
31}
32
33/* Układ z align-content: flex-end */
34.flex-end {
35  align-content: flex-end;
36}
37
38/* Układ z align-content: center */
39.center {
40  align-content: center;
41}
42
43/* Układ z align-content: space-between */
44.space-between {
45  align-content: space-between;
46}
47
48/* Układ z align-content: space-around */
49.space-around {
50  align-content: space-around;
51}
52
53/* Układ z align-content: space-evenly */
54.space-evenly {
55  align-content: space-evenly;
56}

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.

Przejdź do CodeWorlds→