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

Oś pionowa czy pozioma?

1section {
2  display: flex;
3  flex-direction: row | row-reverse | column | column-reverse;
4}

alt text

Przykład powyżej ilustruje możliwość określenia kierunku, w jakim elementy są rozmieszczane w elastycznym kontenerze. Dla modelu Flexboxa istnieją cztery główne opcje układu:

  • row (domyślnie) - elementy są ustawiane w linii poziomej od lewej do prawej strony.
  • row-reverse - elementy są ustawiane w linii poziomej od prawej do lewej strony.
  • column - elementy są ustawiane w linii pionowej od góry do dołu.
  • column-reverse - elementy są ustawiane w linii pionowej od dołu do góry.

Dzięki tym opcjom możemy kontrolować kierunek rozmieszczenia elementów wewnątrz kontenera Flexboxa, co pozwala na elastyczne dostosowanie układu strony do naszych potrzeb.

Ćwiczenie: Układ w modelu Flexbox

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

flex-direction
w modelu Flexbox, aby kontrolować kierunek rozmieszczenia elementów w elastycznym kontenerze. Twoim zadaniem będzie utworzenie strony internetowej z sekcjami, które będą rozmieszczane w różnych kierunkach za pomocą właściwości 
flex-direction
.

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>Układ w modelu Flexbox</title>
8</head>
9<body>
10  <section class="flex-row">
11    <div>Element 1</div>
12    <div>Element 2</div>
13    <div>Element 3</div>
14  </section>
15  <section class="flex-row-reverse">
16    <div>Element 1</div>
17    <div>Element 2</div>
18    <div>Element 3</div>
19  </section>
20  <section class="flex-column">
21    <div>Element 1</div>
22    <div>Element 2</div>
23    <div>Element 3</div>
24  </section>
25  <section class="flex-column-reverse">
26    <div>Element 1</div>
27    <div>Element 2</div>
28    <div>Element 3</div>
29  </section>
30</body>
31</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-wrap: wrap;
4  gap: 20px;
5  margin: 0;
6  padding: 20px;
7  justify-content: space-around;
8}
9
10section {
11  display: flex;
12  border: 1px solid #000;
13  padding: 10px;
14  width: 45%;
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 w linii poziomej (row)

Dodaj styl dla klasy 

.flex-row
, aby ustawić elementy w linii poziomej od lewej do prawej strony.

1/* Układ w linii poziomej (row) */
2.flex-row {
3  flex-direction: row;
4}

Krok 5: Układ w linii poziomej odwrócony (row-reverse)

Dodaj styl dla klasy 

.flex-row-reverse
, aby ustawić elementy w linii poziomej od prawej do lewej strony.

1/* Układ w linii poziomej odwrócony (row-reverse) */
2.flex-row-reverse {
3  flex-direction: row-reverse;
4}

Krok 6: Układ w linii pionowej (column)

Dodaj styl dla klasy 

.flex-column
, aby ustawić elementy w linii pionowej od góry do dołu.

1/* Układ w linii pionowej (column) */
2.flex-column {
3  flex-direction: column;
4}

Krok 7: Układ w linii pionowej odwrócony (column-reverse)

Dodaj styl dla klasy 

.flex-column-reverse
, aby ustawić elementy w linii pionowej od dołu do góry.

1/* Układ w linii pionowej odwrócony (column-reverse) */
2.flex-column-reverse {
3  flex-direction: column-reverse;
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>Układ w modelu Flexbox</title>
8</head>
9<body>
10  <section class="flex-row">
11    <div>Element 1</div>
12    <div>Element 2</div>
13    <div>Element 3</div>
14  </section>
15  <section class="flex-row-reverse">
16    <div>Element 1</div>
17    <div>Element 2</div>
18    <div>Element 3</div>
19  </section>
20  <section class="flex-column">
21    <div>Element 1</div>
22    <div>Element 2</div>
23    <div>Element 3</div>
24  </section>
25  <section class="flex-column-reverse">
26    <div>Element 1</div>
27    <div>Element 2</div>
28    <div>Element 3</div>
29  </section>
30</body>
31</html>

Plik CSS (styles.css)

1body {
2  display: flex;
3  flex-wrap: wrap;
4  gap: 20px;
5  margin: 0;
6  padding: 20px;
7  justify-content: space-around;
8}
9
10section {
11  display: flex;
12  border: 1px solid #000;
13  padding: 10px;
14  width: 45%;
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 w linii poziomej (row) */
28.flex-row {
29  flex-direction: row;
30}
31
32/* Układ w linii poziomej odwrócony (row-reverse) */
33.flex-row-reverse {
34  flex-direction: row-reverse;
35}
36
37/* Układ w linii pionowej (column) */
38.flex-column {
39  flex-direction: column;
40}
41
42/* Układ w linii pionowej odwrócony (column-reverse) */
43.flex-column-reverse {
44  flex-direction: column-reverse;
45}

Eksperymentuj dalej

  1. Dodaj więcej sekcji z różnymi układami, aby lepiej zrozumieć, jak działają różne opcje 
    flex-direction
    .
  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 

flex-direction
w modelu Flexbox, aby kontrolować kierunek rozmieszczenia elementów w elastycznym kontenerze.

Ir a CodeWorlds→