Order i Align-self - indywidualna kontrola elementów

Witaj ponownie w Bibliotece Aleksandryjskiej! Podobnie jak starożytni bibliotekarze mogli zmieniać kolejność zwojów na półkach i ustawiać niektóre z nich inaczej niż pozostałe, tak w Flexbox mamy właściwości order i align-self, które pozwalają na indywidualną kontrolę pojedynczych elementów.

Order - zmiana kolejności wizualnej

Właściwość

order

pozwala zmienić kolejność wyświetlania elementów bez zmiany HTML. To niezwykle potężne narzędzie do responsywnego designu!

Podstawy Order

1.item {
2  order: 0;  /* Domyślna wartość dla wszystkich elementów */
3}
4
5/* Niższa wartość = wcześniej */
6/* Wyższa wartość = później */

Kluczowe zasady:

• Domyślnie wszystkie elementy mają

  order: 0

• Elementy są sortowane od najmniejszej do największej wartości order
• Przy równych wartościach order, kolejność zależy od kolejności w HTML
• Można używać wartości ujemnych (

  order: -1

  )

Przykład podstawowy

1<div class="container">
2  <div class="item-1">1</div>
3  <div class="item-2">2</div>
4  <div class="item-3">3</div>
5  <div class="item-4">4</div>
6</div>

1.container {
2  display: flex;
3}
4
5/* Domyślnie: 1, 2, 3, 4 */
6
7.item-3 {
8  order: -1;  /* Będzie pierwszy: 3, 1, 2, 4 */
9}
10
11.item-1 {
12  order: 1;  /* Będzie ostatni: 3, 2, 4, 1 */
13}
14
15/* Wynik: 3, 2, 4, 1 */

Praktyczny przykład - responsywny layout

1<div class="layout">
2  <header class="header">Header</header>
3  <nav class="sidebar">Sidebar</nav>
4  <main class="content">Content</main>
5  <aside class="ads">Ads</aside>
6  <footer class="footer">Footer</footer>
7</div>

1.layout {
2  display: flex;
3  flex-wrap: wrap;
4}
5
6/* Desktop - domyślna kolejność */
7.header { order: 1; flex: 0 0 100%; }
8.sidebar { order: 2; flex: 0 0 25%; }
9.content { order: 3; flex: 1; }
10.ads { order: 4; flex: 0 0 20%; }
11.footer { order: 5; flex: 0 0 100%; }
12
13/* Mobile - zmień kolejność */
14@media (max-width: 768px) {
15  .header { order: 1; }
16  .content { order: 2; }  /* Content przed sidebar! */
17  .sidebar { order: 3; }
18  .ads { order: 4; }
19  .footer { order: 5; }
20  
21  /* Wszystkie pełna szerokość */
22  .header, .sidebar, .content, .ads, .footer {
23    flex: 0 0 100%;
24  }
25}

Analogia egipska: To jak faraon zmieniający układ komnat w piramidzie - struktura pozostaje ta sama, ale sposób poruszania się zmienia!

Praktyczny przykład - sortowanie produktów

1<div class="products">
2  <div class="product" data-priority="normal">Produkt A</div>
3  <div class="product featured" data-priority="high">Produkt B</div>
4  <div class="product" data-priority="normal">Produkt C</div>
5  <div class="product sale" data-priority="medium">Produkt D</div>
6</div>

1.products {
2  display: flex;
3  flex-wrap: wrap;
4  gap: 20px;
5}
6
7.product {
8  flex: 0 0 calc(33.333% - 14px);
9  order: 3;  /* Normalne produkty na końcu */
10}
11
12.product.featured {
13  order: 1;  /* Wyróżnione na początku */
14  border: 3px solid goldenrod;
15}
16
17.product.sale {
18  order: 2;  /* Wyprzedaż w środku */
19  background: #e74c3c;
20  color: white;
21}
22
23/* Wynik: Featured → Sale → Normal → Normal */

Uwagi o dostępności

⚠️ WAŻNE: Order zmienia tylko wizualną kolejność, nie kolejność w DOM!

1<div class="tabs">
2  <button>Tab 1</button>
3  <button>Tab 2</button>
4  <button>Tab 3</button>
5</div>

1.tabs button:first-child {
2  order: 3;  /* Wizualnie ostatni */
3}
4
5/* Problem: Nawigacja klawiaturą (Tab) zachowa oryginalną kolejność! */

Rozwiązanie:

• Używaj order tylko do wizualnych zmian, które nie wpływają na logiczny przepływ
• Dla ważnych zmian kolejności, zmień kolejność w HTML
• Testuj nawigację klawiaturą

Align-self - indywidualne wyrównanie

Właściwość

align-self

pozwala nadpisać

align-items

dla pojedynczego elementu.

Wartości align-self

1.item {
2  align-self: auto;          /* Dziedz icz z align-items (default) */
3  align-self: flex-start;    /* Na początku osi poprzecznej */
4  align-self: flex-end;      /* Na końcu osi poprzecznej */
5  align-self: center;        /* Wyśrodkowany */
6  align-self: baseline;      /* Wyrównany do linii bazowej tekstu */
7  align-self: stretch;       /* Rozciągnięty (jeśli brak height) */
8}

Przykład podstawowy

1<div class="container">
2  <div class="item">Item 1</div>
3  <div class="item special">Item 2 (Special)</div>
4  <div class="item">Item 3</div>
5</div>

1.container {
2  display: flex;
3  align-items: center;  /* Wszystkie wyśrodkowane */
4  height: 300px;
5  border: 2px solid #ddd;
6}
7
8.item {
9  padding: 20px;
10  background: #3498db;
11  color: white;
12}
13
14/* Jeden element inaczej wyrównany */
15.item.special {
16  align-self: flex-start;  /* Ten będzie na górze */
17  background: goldenrod;
18}

Praktyczne przykłady

1. Card z przyciskiem na dole

1<div class="cards">
2  <div class="card">
3    <h3>Produkt 1</h3>
4    <p>Krótki opis</p>
5    <button class="btn">Kup teraz</button>
6  </div>
7  <div class="card">
8    <h3>Produkt 2</h3>
9    <p>Bardzo długi opis, który zajmuje dużo więcej miejsca...</p>
10    <button class="btn">Kup teraz</button>
11  </div>
12</div>

1.cards {
2  display: flex;
3  gap: 20px;
4}
5
6.card {
7  flex: 1;
8  display: flex;
9  flex-direction: column;
10  padding: 20px;
11  border: 1px solid #ddd;
12}
13
14.card h3,
15.card p {
16  flex: 0;
17}
18
19.card .btn {
20  align-self: stretch;  /* Przycisk na pełną szerokość */
21  margin-top: auto;  /* Przesuń na dół */
22}

2. Avatar w chat message

1<div class="message">
2  <img src="avatar.jpg" alt="User" class="avatar">
3  <div class="message-content">
4    <h4>User Name</h4>
5    <p>To jest wiadomość, która może być długa...</p>
6    <span class="timestamp">10:30</span>
7  </div>
8</div>

1.message {
2  display: flex;
3  gap: 15px;
4  align-items: flex-start;  /* Wszystko na górze */
5  padding: 15px;
6}
7
8.avatar {
9  width: 50px;
10  height: 50px;
11  border-radius: 50%;
12  flex-shrink: 0;
13  align-self: center;  /* Avatar wyśrodkowany pionowo */
14}
15
16.message-content {
17  flex: 1;
18}
19
20.timestamp {
21  align-self: flex-end;  /* Timestamp na dole */
22  font-size: 0.8em;
23  color: #777;
24}

3. Icon toolbar

1<div class="toolbar">
2  <button class="tool">Icon 1</button>
3  <button class="tool">Icon 2</button>
4  <button class="tool large">Big Icon</button>
5  <button class="tool">Icon 3</button>
6</div>

1.toolbar {
2  display: flex;
3  gap: 10px;
4  padding: 10px;
5  background: #34495e;
6  align-items: center;  /* Wszystkie wyśrodkowane */
7}
8
9.tool {
10  width: 40px;
11  height: 40px;
12  background: #3498db;
13  border: none;
14  color: white;
15  cursor: pointer;
16}
17
18.tool.large {
19  width: 60px;
20  height: 60px;
21  align-self: flex-start;  /* Wyrównany do góry */
22  background: goldenrod;
23}

Order + Align-self - kombinacja

Możesz używać obu właściwości jednocześnie:

1<div class="hero">
2  <div class="hero-image">Image</div>
3  <div class="hero-content">Content</div>
4</div>

1.hero {
2  display: flex;
3  align-items: center;
4  min-height: 500px;
5  gap: 40px;
6}
7
8.hero-image {
9  flex: 0 0 50%;
10  order: 2;  /* Image po prawej */
11}
12
13.hero-content {
14  flex: 1;
15  order: 1;  /* Content po lewej */
16  align-self: flex-start;  /* Content na górze */
17}
18
19/* Na mobile */
20@media (max-width: 768px) {
21  .hero {
22    flex-direction: column;
23  }
24  
25  .hero-image {
26    order: 1;  /* Image na górze */
27    flex: 0 0 auto;
28  }
29  
30  .hero-content {
31    order: 2;  /* Content na dole */
32    align-self: stretch;  /* Pełna szerokość */
33  }
34}

Praktyczne wzorce

1. Featured item na początku

1.grid {
2  display: flex;
3  flex-wrap: wrap;
4  gap: 20px;
5}
6
7.grid-item {
8  flex: 0 0 calc(33.333% - 14px);
9  order: 2;
10}
11
12.grid-item.featured {
13  flex: 0 0 100%;
14  order: 1;  /* Zawsze pierwszy */
15  align-self: stretch;
16  background: goldenrod;
17}

2. Sticky footer w card

1.card {
2  display: flex;
3  flex-direction: column;
4  height: 100%;
5}
6
7.card-header {
8  flex: 0 0 auto;
9}
10
11.card-body {
12  flex: 1;
13}
14
15.card-footer {
16  flex: 0 0 auto;
17  align-self: stretch;
18  margin-top: auto;  /* Zawsze na dole */
19}

3. Responsive form

1.form {
2  display: flex;
3  flex-wrap: wrap;
4  gap: 15px;
5}
6
7.form-field {
8  flex: 0 0 calc(50% - 7.5px);
9}
10
11.form-field.full {
12  flex: 0 0 100%;
13}
14
15.form-submit {
16  flex: 0 0 auto;
17  order: 999;  /* Zawsze na końcu */
18  align-self: flex-end;
19  margin-top: 10px;
20}
21
22@media (max-width: 768px) {
23  .form-field {
24    flex: 0 0 100%;
25  }
26  
27  .form-submit {
28    align-self: stretch;  /* Pełna szerokość na mobile */
29  }
30}

Podsumowanie

Order:

• Zmienia wizualną kolejność elementów
• Nie zmienia kolejności w DOM (dostępność!)
• Świetne do responsywnego designu
• Wartości ujemne są dozwolone
• Default:

  order: 0

Align-self:

• Nadpisuje

  align-items

  dla pojedynczego elementu
• Wartości: flex-start, flex-end, center, baseline, stretch, auto
• Działa tylko na osi poprzecznej (cross axis)
• Default:

  align-self: auto

  (dziedziczy z align-items)

Kiedy używać:

• Order - gdy potrzebujesz zmienić kolejność na różnych breakpointach
• Align-self - gdy jeden element powinien być wyrównany inaczej niż reszta

Pamiętaj: Order i align-self to jak specjalne rozkazy faraona dla pojedynczych bloków w piramidzie - pozwalają na wyjątki od ogólnych zasad, dając pełną kontrolę nad układem!