Usamos cookies para mejorar tu experiencia en el sitio
Política de Privacidad
Aceptar
CodeWorlds

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.

Ir a CodeWorlds→