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

Właściwości dla dzieci

Order

Właściwość "order" w modelu Flexbox pozwala kontrolować kolejność wyświetlania elementów flexowych w kontenerze. Domyślnie elementy są ułożone w kolejności źródłowej, czyli takiej, w jakiej występują w kodzie HTML. Jednak właściwość "order" pozwala zmienić tę kolejność i dowolnie ustawić, w jakiej kolejności elementy mają się pojawiać na stronie.

Wartość właściwości "order" jest liczbą całkowitą. Im niższa wartość, tym wcześniej element zostanie wyświetlony. Jeśli dwa lub więcej elementów mają taką samą wartość "order", to zachowana zostanie ich kolejność w kodzie HTML.

Przykładem użycia właściwości "order" może być sytuacja, w której chcemy zmienić kolejność wyświetlania niektórych elementów flexowych w kontenerze. Na przykład, jeśli mamy dwa elementy A i B, możemy ustawić dla elementu A wartość "order: 2", a dla elementu B wartość "order: 1". W efekcie, element B zostanie wyświetlony jako pierwszy, pomimo występowania po elementie A w kodzie źródłowym.

Dzięki właściwości "order" możemy elastycznie manipulować kolejnością elementów flexowych, co daje nam większą kontrolę nad układem strony i prezentacją treści.

1.box {
2  order: 5;
3}

Właściwość "flex-grow" w modelu Flexbox definiuje możliwość wzrostu elementu, jeśli jest to konieczne. Przyjmuje wartość bez jednostek, która służy jako proporcja. Wartość "flex-grow" określa, ile miejsca wewnątrz elastycznego kontenera powinien zajmować dany element.

Na przykład, jeśli wszystkie elementy w kontenerze mają ustawioną wartość "flex-grow: 1", to pozostała dostępna przestrzeń w kontenerze zostanie równo podzielona między wszystkie dzieci. Jeśli jedno z dzieci ma wartość "flex-grow: 2", to oznacza, że to dziecko będzie starało się zajmować dwa razy więcej miejsca niż pozostałe elementy.

Przykładem użycia właściwości "flex-grow" może być kontener Flexbox z trzema elementami o klasie "box". Jeśli ustawimy dla pierwszego elementu "flex-grow: 2", a dla pozostałych dwóch "flex-grow: 1", to pierwszy element będzie starał się zajmować dwukrotnie więcej miejsca niż pozostałe elementy.

Właściwość "flex-shrink" w modelu Flexbox definiuje możliwość kurczenia się elementu flex w razie potrzeby. Działa na zasadzie proporcji, podobnie jak "flex-grow". Wartość "flex-shrink" określa, jak element ma się kurczyć w stosunku do innych elementów, gdy dostępna przestrzeń w kontenerze jest ograniczona.

Na przykład, jeśli wszystkie elementy mają ustawioną wartość "flex-shrink: 1", to pozostała dostępna przestrzeń w kontenerze zostanie równo rozdzielona między wszystkie dzieci. Jeśli jedno z dzieci ma wartość "flex-shrink: 2", to oznacza, że to dziecko będzie starało się kurczyć dwa razy szybciej niż pozostałe elementy, gdy dostępna przestrzeń jest ograniczona.

Przykładem użycia właściwości "flex-shrink" może być kontener Flexbox z trzema elementami o klasie "box". Jeśli ustawimy dla pierwszego elementu "flex-shrink: 2", a dla pozostałych dwóch "flex-shrink: 1", to pierwszy element będzie starał się kurczyć dwa razy szybciej niż pozostałe elementy, gdy dostępna przestrzeń jest ograniczona.

Właściwość "flex-basis" w modelu Flexbox określa początkowy rozmiar elementu przed uwzględnieniem wzrostu lub kurczenia się. Może być ustawiona jako wartość bez jednostek lub jako wartość procentowa względem szerokości kontenera.

Na przykład, jeśli dla elementu mamy ustawioną wartość "flex-basis: 200px", to początkowo ten element będzie miał szerokość 200 pikseli. Dopiero po uwzględnieniu wartości "flex-grow" i "flex-sh

rink" element będzie dostosowywał swoją szerokość w zależności od dostępnej przestrzeni w kontenerze.

Przykładem użycia właściwości "flex-basis" może być kontener Flexbox z trzema elementami o klasie "box". Jeśli dla pierwszego elementu ustawimy "flex-basis: 200px", a dla pozostałych dwóch "flex-basis: 150px", to pierwszy element będzie miał początkową szerokość 200 pikseli, a pozostałe elementy będą miały początkową szerokość 150 pikseli.

Właściwość "align-self" w modelu Flexbox pozwala na indywidualne wyśrodkowanie elementu wzdłuż osi poprzecznej (cross-axis), pomijając ustawienia zdefiniowane dla całego kontenera. Działa podobnie jak właściwość "align-items", ale ma zastosowanie tylko do konkretnego elementu, nie do wszystkich elementów w kontenerze.

Na przykład, jeśli ustawimy dla jednego z elementów wartość "align-self: center", to ten element będzie wyśrodkowany wzdłuż osi poprzecznej, niezależnie od ustawień "align-items" dla całego kontenera.

Przykładem użycia właściwości "align-self" może być kontener Flexbox z trzema elementami o klasie "box". Dla jednego z elementów ustawiamy "align-self: center", co powoduje, że ten element będzie wyśrodkowany wzdłuż osi poprzecznej, podczas gdy pozostałe elementy zachowają ustawienia zdefiniowane dla całego kontenera.

Ćwiczenie: Właściwości dla dzieci w Flexbox

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

order
, 
flex-grow
, 
flex-shrink
, 
flex-basis
i 
align-self
w modelu Flexbox, aby precyzyjnie kontrolować układ 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ą 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>Właściwości dla dzieci w Flexbox</title>
8</head>
9<body>
10  <section class="container">
11    <div class="box order-1">Element 1</div>
12    <div class="box order-2">Element 2</div>
13    <div class="box order-3">Element 3</div>
14  </section>
15  <section class="container">
16    <div class="box grow-2">Element 1</div>
17    <div class="box grow-1">Element 2</div>
18    <div class="box grow-1">Element 3</div>
19  </section>
20  <section class="container">
21    <div class="box shrink-2">Element 1</div>
22    <div class="box shrink-1">Element 2</div>
23    <div class="box shrink-1">Element 3</div>
24  </section>
25  <section class="container">
26    <div class="box basis-200">Element 1</div>
27    <div class="box basis-150">Element 2</div>
28    <div class="box basis-100">Element 3</div>
29  </section>
30  <section class="container">
31    <div class="box self-center">Element 1</div>
32    <div class="box">Element 2</div>
33    <div class="box">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
10.container {
11  display: flex;
12  border: 1px solid #000;
13  padding: 10px;
14  width: 80%;
15  height: auto;
16  margin: 10px 0;
17}
18
19.container .box {
20  background-color: lightblue;
21  margin: 5px;
22  padding: 20px;
23  text-align: center;
24  flex: 1;
25}

Krok 4: Użycie właściwości 
order

Dodaj styl dla klas 

.order-1
, 
.order-2
i 
.order-3
, aby zmienić kolejność wyświetlania elementów.

1/* Układ z order */
2.order-1 {
3  order: 1;
4}
5
6.order-2 {
7  order: 2;
8}
9
10.order-3 {
11  order: 3;
12}

Krok 5: Użycie właściwości 
flex-grow

Dodaj styl dla klas 

.grow-1
i 
.grow-2
, aby zmienić proporcje wzrostu elementów.

1/* Układ z flex-grow */
2.grow-1 {
3  flex-grow: 1;
4}
5
6.grow-2 {
7  flex-grow: 2;
8}

Krok 6: Użycie właściwości 
flex-shrink

Dodaj styl dla klas 

.shrink-1
i 
.shrink-2
, aby zmienić proporcje kurczenia się elementów.

1/* Układ z flex-shrink */
2.shrink-1 {
3  flex-shrink: 1;
4}
5
6.shrink-2 {
7  flex-shrink: 2;
8}

Krok 7: Użycie właściwości 
flex-basis

Dodaj styl dla klas 

.basis-100
, 
.basis-150
i 
.basis-200
, aby ustawić początkowy rozmiar elementów.

1/* Układ z flex-basis */
2.basis-100 {
3  flex-basis: 100px;
4}
5
6.basis-150 {
7  flex-basis: 150px;
8}
9
10.basis-200 {
11  flex-basis: 200px;
12}

Krok 8: Użycie właściwości 
align-self

Dodaj styl dla klasy 

.self-center
, aby wyśrodkować jeden z elementów wzdłuż osi poprzecznej.

1/* Układ z align-self */
2.self-center {
3  align-self: center;
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>Właściwości dla dzieci w Flexbox</title>
8</head>
9<body>
10  <section class="container">
11    <div class="box order-1">Element 1</div>
12    <div class="box order-2">Element 2</div>
13    <div class="box order-3">Element 3</div>
14  </section>
15  <section class="container">
16    <div class="box grow-2">Element 1</div>
17    <div class="box grow-1">Element 2</div>
18    <div class="box grow-1">Element 3</div>
19  </section>
20  <section class="container">
21    <div class="box shrink-2">Element 1</div>
22    <div class="box shrink-1">Element 2</div>
23    <div class="box shrink-1">Element 3</div>
24  </section>
25  <section class="container">
26    <div class="box basis-200">Element 1</div>
27    <div class="box basis-150">Element 2</div>
28    <div class="box basis-100">Element 3</div>
29  </section>
30  <section class="container">
31    <div class="box self-center">Element 1</div>
32    <div class="box">Element 2</div>
33    <div class="box">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
10.container {
11  display: flex;
12  border: 1px solid #000;
13  padding: 10px;
14  width: 80%;
15  height: auto;
16  margin: 10px 0;
17}
18
19.container .box {
20  background-color: lightblue;
21  margin: 5px;
22  padding: 20px;
23  text-align: center;
24  flex: 1;
25}
26
27/* Układ z order */
28.order-1 {
29  order: 1;
30}
31
32.order-2 {
33  order: 2;
34}
35
36.order-3 {
37  order: 3;
38}
39
40/* Układ z flex-grow */
41.grow-1 {
42  flex-grow: 1;
43}
44
45.grow-2 {
46  flex-grow: 2;
47}
48
49/* Układ z flex-shrink */
50.shrink-1 {
51  flex-shrink: 1;
52}
53
54.shrink-2 {
55  flex-shrink: 2;
56}
57
58/* Układ z flex-basis */
59.basis-100 {
60  flex-basis: 100px;
61}
62
63.basis-150 {
64  flex-basis: 150px;
65}
66
67.basis-200 {
68  flex-basis: 200px;
69}
70
71/* Układ z align-self */
72.self-center {
73  align-self: center;
74}

Zadanie dodatkowe

  1. Dodaj więcej sekcji z różnymi wartościami 
    order
    , 
    flex-grow
    , 
    flex-shrink
    , 
    flex-basis
    i 
    align-self
    , 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 

order
, 
flex-grow
, 
flex-shrink
, 
flex-basis
i 
align-self
w modelu Flexbox, aby precyzyjnie kontrolować układ elementów w kontenerze.

Przejdź do CodeWorlds→