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

Dopasowanie elementów w osi poziomej

1section {
2  display: flex;
3  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right;
4}
  • Właściwość "flex-start" (domyślna) - elementy są rozmieszczane w kierunku początku.
  • Właściwość "flex-end" - elementy są rozmieszczane w kierunku końca.
  • Właściwość "start" - elementy są rozmieszczane w kierunku początku zgodnie z writing-mode.
  • Właściwość "end" - elementy są rozmieszczane w kierunku końca zgodnie z writing-mode.
  • Właściwość "left" - elementy są rozmieszczane w kierunku lewej krawędzi kontenera, chyba że flex-direction nie ma zastosowania, wtedy zachowuje się jak "start".
  • Właściwość "right" - elementy są rozmieszczane w kierunku prawej krawędzi kontenera, chyba że flex-direction nie ma zastosowania, wtedy zachowuje się jak "end".
  • Właściwość "center" - elementy są wyśrodkowane wzdłuż linii.
  • Właściwość "space-between" - elementy są równomiernie rozmieszczone w linii; pierwszy element znajduje się przy linii początkowej, a ostatni element przy linii końcowej.
  • Właściwość "space-around" - elementy są równomiernie rozmieszczone w linii, z równą przestrzenią wokół nich. Odstępy między elementami są równe, ale uwaga: odstępy po obu stronach są większe niż odstępy między elementami.
  • Właściwość "space-evenly" - elementy są równomiernie rozmieszczone w linii, tak aby odstępy między dowolnymi dwoma elementami (i odstęp od krawędzi) były równe.

Dzięki tym właściwościom możemy precyzyjnie kontrolować rozmieszczenie elementów w kontenerze Flexbox, zapewniając harmonijny i estetyczny układ na stronie internetowej.

Ćwiczenie: Dopasowanie elementów w osi poziomej

W tym ćwiczeniu nauczysz się, jak używać właściwości 

justify-content
w modelu Flexbox, aby precyzyjnie kontrolować rozmieszczenie elementów w osi poziomej. 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 
justify-content
.

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 poziomej</title>
8</head>
9<body>
10  <section class="flex-start">
11    <div>Element 1</div>
12    <div>Element 2</div>
13    <div>Element 3</div>
14  </section>
15  <section class="flex-end">
16    <div>Element 1</div>
17    <div>Element 2</div>
18    <div>Element 3</div>
19  </section>
20  <section class="center">
21    <div>Element 1</div>
22    <div>Element 2</div>
23    <div>Element 3</div>
24  </section>
25  <section class="space-between">
26    <div>Element 1</div>
27    <div>Element 2</div>
28    <div>Element 3</div>
29  </section>
30  <section class="space-around">
31    <div>Element 1</div>
32    <div>Element 2</div>
33    <div>Element 3</div>
34  </section>
35  <section class="space-evenly">
36    <div>Element 1</div>
37    <div>Element 2</div>
38    <div>Element 3</div>
39  </section>
40</body>
41</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: 100px;
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 
justify-content: flex-start

Dodaj styl dla klasy 

.flex-start
, aby ustawić elementy w kierunku początku.

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

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

Dodaj styl dla klasy 

.flex-end
, aby ustawić elementy w kierunku końca.

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

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

Dodaj styl dla klasy 

.center
, aby wyśrodkować elementy.

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

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

Dodaj styl dla klasy 

.space-between
, aby równomiernie rozmieścić elementy w linii, z pierwszym elementem przy linii początkowej, a ostatnim przy linii końcowej.

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

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

Dodaj styl dla klasy 

.space-around
, aby równomiernie rozmieścić elementy w linii, z równą przestrzenią wokół nich.

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

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

Dodaj styl dla klasy 

.space-evenly
, aby równomiernie rozmieścić elementy w linii, tak aby odstępy między dowolnymi dwoma elementami (i odstęp od krawędzi) były równe.

1/* Układ z justify-content: space-evenly */
2.space-evenly {
3  justify-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 w osi poziomej</title>
8</head>
9<body>
10  <section class="flex-start">
11    <div>Element 1</div>
12    <div>Element 2</div>
13    <div>Element 3</div>
14  </section>
15  <section class="flex-end">
16    <div>Element 1</div>
17    <div>Element 2</div>
18    <div>Element 3</div>
19  </section>
20  <section class="center">
21    <div>Element 1</div>
22    <div>Element 2</div>
23    <div>Element 3</div>
24  </section>
25  <section class="space-between">
26    <div>Element 1</div>
27    <div>Element 2</div>
28    <div>Element 3</div>
29  </section>
30  <section class="space-around">
31    <div>Element 1</div>
32    <div>Element 2</div>
33    <div>Element 3</div>
34  </section>
35  <section class="space-evenly">
36    <div>Element 1</div>
37    <div>Element 2</div>
38    <div>Element 3</div>
39  </section>
40</body>
41</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: 100px;
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 justify-content: flex-start */
28.flex-start {
29  justify-content: flex-start;
30}
31
32/* Układ z justify-content: flex-end */
33.flex-end {
34  justify-content: flex-end;
35}
36
37/* Układ z justify-content: center */
38.center {
39  justify-content: center;
40}
41
42/* Układ z justify-content: space-between */
43.space-between {
44  justify-content: space-between;
45}
46
47/* Układ z justify-content: space-around */
48.space-around {
49  justify-content: space-around;
50}
51
52/* Układ z justify-content: space-evenly */
53.space-evenly {
54  justify-content: space-evenly;
55}

Eksperymentuj dalej

  1. Dodaj więcej sekcji z różnymi wartościami 
    justify-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 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 

justify-content
w modelu Flexbox, aby precyzyjnie kontrolować rozmieszczenie elementów w osi poziomej.

Przejdź do CodeWorlds→