Utilizziamo i cookie per migliorare la tua esperienza sul sito
Informativa sulla Privacy
OK
CodeWorlds

Dopasowanie elementów w osi pionowej i poziomej

1. Oś Główna (Main Axis)

Oś główna jest główną osią, wzdłuż której przedmioty flex są układane w kontenerze flex. Kierunek tej osi jest kontrolowany przez właściwość flex-direction.

  • flex-direction: row: Oś główna biegnie w poziomie od lewej do prawej (dla języków pisanych od lewej do prawej). Jest to domyślny kierunek.

  • flex-direction: column: Oś główna biegnie w pionie od góry do dołu.

Właściwość justify-content jest używana do zarządzania układem przedmiotów wzdłuż osi głównej.

2. Oś Poprzeczna (Cross Axis)

Oś poprzeczna biegnie prostopadle do osi głównej. Jeśli oś główna jest pozioma, oś poprzeczna będzie pionowa i odwrotnie.

Właściwość align-items jest używana do zarządzania układem przedmiotów wzdłuż osi poprzecznej.

Przykłady i Stosowanie**

Oś Pozioma (Row):

css .container { display: flex; flex-direction: row; // oś główna jest pozioma justify-content: center; // wyśrodkowuje przedmioty wzdłuż osi głównej align-items: flex-start; // wyrównuje przedmioty do górnej części osi poprzecznej }

Oś Pionowa (Column):

css .container { display: flex; flex-direction: column; // oś główna jest pionowa justify-content: space-around; // rozdziela przedmioty równomiernie wzdłuż osi głównej align-items: flex-end; // wyrównuje przedmioty do prawej części osi poprzecznej }

Podsumowanie

Rozumienie osi pionowej i poziomej w Flexbox jest kluczowe do kontroli układu elementów na stronie.

Ćwiczenie: Dopasowanie elementów w osi pionowej i poziomej

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

flex-direction
, 
justify-content
i 
align-items
w modelu Flexbox, aby precyzyjnie kontrolować układ elementów w kontenerze Flexbox zarówno w osi pionowej, jak i poziomej. Twoim zadaniem będzie utworzenie strony internetowej z kontenerami, które będą rozmieszczane w różnych układach za pomocą tych 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 w osi pionowej i poziomej</title>
8</head>
9<body>
10  <section class="container row-center-start">
11    <div>Element 1</div>
12    <div>Element 2</div>
13    <div>Element 3</div>
14  </section>
15  <section class="container column-around-end">
16    <div>Element 1</div>
17    <div>Element 2</div>
18    <div>Element 3</div>
19  </section>
20  <section class="container row-space-between-center">
21    <div>Element 1</div>
22    <div>Element 2</div>
23    <div>Element 3</div>
24  </section>
25</body>
26</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  border: 1px solid #000;
13  padding: 10px;
14  width: 80%;
15  height: 200px;
16  margin: 10px 0;
17}
18
19.container div {
20  background-color: lightblue;
21  margin: 5px;
22  padding: 20px;
23  text-align: center;
24  flex: 1;
25}

Krok 4: Układ z 
row
, 
justify-content: center
i 
align-items: flex-start

Dodaj styl dla klasy 

.row-center-start
, aby ustawić elementy w poziomie, wyśrodkowane wzdłuż osi głównej i wyrównane do początku osi poprzecznej.

1/* Układ z row, justify-content: center i align-items: flex-start */
2.row-center-start {
3  flex-direction: row;
4  justify-content: center;
5  align-items: flex-start;
6}

Krok 5: Układ z 
column
, 
justify-content: space-around
i 
align-items: flex-end

Dodaj styl dla klasy 

.column-around-end
, aby ustawić elementy w pionie, równomiernie rozmieszczone wzdłuż osi głównej i wyrównane do końca osi poprzecznej.

1/* Układ z column, justify-content: space-around i align-items: flex-end */
2.column-around-end {
3  flex-direction: column;
4  justify-content: space-around;
5  align-items: flex-end;
6}

Krok 6: Układ z 
row
, 
justify-content: space-between
i 
align-items: center

Dodaj styl dla klasy 

.row-space-between-center
, aby ustawić elementy w poziomie, rozmieszczone równomiernie z odstępami między nimi wzdłuż osi głównej i wyśrodkowane w osi poprzecznej.

1/* Układ z row, justify-content: space-between i align-items: center */
2.row-space-between-center {
3  flex-direction: row;
4  justify-content: space-between;
5  align-items: center;
6}

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 i poziomej</title>
8</head>
9<body>
10  <section class="container row-center-start">
11    <div>Element 1</div>
12    <div>Element 2</div>
13    <div>Element 3</div>
14  </section>
15  <section class="container column-around-end">
16    <div>Element 1</div>
17    <div>Element 2</div>
18    <div>Element 3</div>
19  </section>
20  <section class="container row-space-between-center">
21    <div>Element 1</div>
22    <div>Element 2</div>
23    <div>Element 3</div>
24  </section>
25</body>
26</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  border: 1px solid #000;
13  padding: 10px;
14  width: 80%;
15  height: 200px;
16  margin: 10px 0;
17}
18
19.container div {
20  background-color: lightblue;
21  margin: 5px;
22  padding: 20px;
23  text-align: center;
24  flex: 1;
25}
26
27/* Układ z row, justify-content: center i align-items: flex-start */
28.row-center-start {
29  flex-direction: row;
30  justify-content: center;
31  align-items: flex-start;
32}
33
34/* Układ z column, justify-content: space-around i align-items: flex-end */
35.column-around-end {
36  flex-direction: column;
37  justify-content: space-around;
38  align-items: flex-end;
39}
40
41/* Układ z row, justify-content: space-between i align-items: center */
42.row-space-between-center {
43  flex-direction: row;
44  justify-content: space-between;
45  align-items: center;
46}

Zadanie dodatkowe

  1. Stwórz dodatkową sekcję z własnym układem, używając różnych kombinacji właściwości 
    flex-direction
    , 
    justify-content
    i 
    align-items
    .
  2. Dodaj style, aby zmienić kolory tła, marginesy lub 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 

flex-direction
, 
justify-content
i 
align-items
w modelu Flexbox, aby precyzyjnie kontrolować układ elementów w kontenerze.

Vai a CodeWorlds→