Pomoc:Wikiflex

Klasa wikiflex – nowoczesna możliwość tworzenia elastycznych układów elementów. Zwłaszcza do układania obok siebie tabel itp. Najlepiej działa dla tabel, które są podobnej wysokości. Klasa działa dobrze na komputerach PC, laptopach i jest czytelne potem także na komórce (i innych urządzeniach mobilnych).

Krótkie tabele

Bazowy przykład. Tutaj tabele są dwie, ale może być ich więcej, w razie czego nowe pojawią się w następnej linii.

<div class="wikiflex">
{| class="wikitable"
|+ Tytuł
! Nagłówek A
! Nagłówek B
|-
| Komórka 1A
| Komórka 1B
|-
| Komórka 2A
| Komórka 2B
|-
| Komórka 3A
| Komórka 3B
|-
| Komórka 4A
| Komórka 4B
|}
{| class="wikitable"
|+ Tytuł
! Nagłówek A
! Nagłówek B
|-
| Komórka 1A
| Komórka 1B
|-
| Komórka 2A
| Komórka 2B
|}
</div>

Tytuł
Nagłówek A	Nagłówek B
Komórka 1A	Komórka 1B
Komórka 2A	Komórka 2B
Komórka 3A	Komórka 3B
Komórka 4A	Komórka 4B

Tytuł
Nagłówek A	Nagłówek B
Komórka 1A	Komórka 1B
Komórka 2A	Komórka 2B

Dwie grupy div

Przykład na podstawie: Unconditional (album Memphis May Fire).

W tym wypadku trzeba było dodać dodatkowe elementy div, które otoczą grupy, które układamy obok siebie. Dołożenie dodatkowy elementów jest konieczne jeśli elementy nie są naturalnie zgrupowane (nie są jednym tagiem). Jeśli nie masz pewności zawsze możesz dodać div naokoło logicznych grup.

Zwróć uwagę, że tutaj listy zaczynają się od niby-nagłówka tworząc dwie logiczne grupy (to znaczy po prostu wizualnie wyglądają jak grupy, czy wręcz jak osobne sekcje). W wypadku zwykłych list lepiej i prościej jest użyć szablonu: {{Układ wielokolumnowy}} (bardziej płynny układ kolumn). Poniższa metoda działa dobrze gdy podział między grupami jest istotny i stały.

<div class="wikiflex">
<div>
; Memphis May Fire
* Matty Mullins - wokal prowadzący, keyboard
* Kellen McGregor - gitara prowadząca, wokal wspierający
* Anthony Sepe - gitara rytmiczna
* Cory Elder - gitara basowa
* Jake Garland - perkusja
</div>
<div>
; Dodatkowo
* Kellen McGregor - produkcja, technik
* Cameron Mizell - producent, technik, miksowanie, [[mastering]]
* Brian Hood - miksowanie, [[mastering]] (reedycja)
</div>
</div>

Memphis May Fire

Matty Mullins - wokal prowadzący, keyboard
Kellen McGregor - gitara prowadząca, wokal wspierający
Anthony Sepe - gitara rytmiczna
Cory Elder - gitara basowa
Jake Garland - perkusja

Dodatkowo

Kellen McGregor - produkcja, technik
Cameron Mizell - producent, technik, miksowanie, mastering
Brian Hood - miksowanie, mastering (reedycja)

Wąskie tabele

Przykład na podstawie: Superpuchar Turcji w piłce siatkowej mężczyzn (2017).

Zwróć uwagę, że nie ma znaczenia ile jest tabel, czy nowe będą trochę chudsze, czy trochę grubsze. Wszystko będzie po prostu działać, a w razie czego zawinie się pod spód.

<div class="wikiflex">
{|class="wikitable" style="text-align: center;"
|+ Set 1
|-
|...tabela...
|}
{|class="wikitable" style="text-align: center;"
|+ Set 2
|-
|...tabela...
|}
{|class="wikitable" style="text-align: center;"
|+ Set 3
|-
|...tabela...
|}
{|class="wikitable" style="text-align: center;"
|+ Set 4
|-
|...tabela...
|}
</div>

Set 1
HAL	FEN
	1
1
	2
2
	3
	4
3
	5
4
	6
5
	7
6
	8
	9
7
8
	10
9
	11
10
	12
11
	13
12
	14
13
	15
14
	16
15
16
	17
	18
	19
	20
	21
17
18
19
	22
20
	23
	24
21
22
	25

Set 2
HAL	FEN
1
	1
2
	2
	3
3
4
	4
5
	5
	6
6
	7
7
8
	8
9
	9
	10
10
	11
11
	12
12
	13
	14
13
	15
14
	16
15
	17
16
17
	18
18
19
	19
	20
20
	21
21
22
	22
23
	23
24
	24
25
26

Set 3
HAL	FEN
	1
	2
	3
1
	4
2
	5
	6
	7
3
	8
4
5
	9
6
	10
7
	11
8
	12
	13
	14
9
10
	15
11
	16
12
13
	17
14
	18
	19
	20
	21
15
	22
16
17
	23
18
	24
	25

Set 4
HAL	FEN
	1
	2
1
	3
2
	4
	5
3
4
5
	6
	7
6
	8
	9
	10
	11
	12
	13
	14
7
	15
	16
8
	17
9
	18
	19
10
	20
11
	21
12
	22
13
	23
	24
	25

Szerokie tabele

Połączenie wikiflex shrink-grow może pomóc w układaniu obok siebie szerokich tabel, zwłaszcza przy infoboksie. Działa to dobrze szczególnie dobrze gdy tabele są podobnej wysokości, ale nie muszą być dokładnie takie same.

<div class="wikiflex shrink-grow">
{|class="wikitable" style="text-align: center;"
|+ Najwięcej występów w kadrze 
|-
|...tabela...
|}
{|class="wikitable" style="text-align: center;"
|+ Najwięcej goli w kadrze
|-
|...tabela...
|}
</div>

Z klasą shrink-grow

W wypadku dwóch tabel powinny one ułożyć się obok siebie i równomiernie wypełnić przestrzeń.

Najwięcej występów w kadrze
#	Nazwisko	Mecze	Bramki	Lata gry w kadrze
1	Mohammed Nowak	178	0	1993–2006
2	Mohammed Nowak	163	3	1992–2001
3	Sami Nowak	156	46	1992–2006
4	Abdullah Zubromawi	142	3	1993–2002
5	Usama Hausawi	138	7	2006–2018
5	Hussein Sulaimani	138	5	1992–2009
7	Taisir Nowak	134	19	2004-2018
8	Saud Chariri	133	7	2001–2015
9	Mohamed Nowak	121	7	1981–1994
10	Mohammad Nowak	118	19	2000-2018

Najwięcej goli w kadrze
#	Nazwisko	Bramki	Mecze	Lata gry w kadrze
1	Majed Abdullah	71	116	1978–1994
2	Sami Nowak	46	156	1992–2006
3	Yasser Nowak	42	112	2002–2013
4	Obeid Nowak	41	94	1994–2002
5	Talal Nowak	32	60	1998–2006
6	Khalid Nowak	28	114	1988–1998
6	Mohammad Nowak	28	42	2010–
8	Fahad Nowak	26	87	1992–1999
9	Sa’id Kowalski	24	75	1992–1998
9	Ibrahim Ash-Shahrani	24	86	1997–2005
10	Hussein Kowalski	23	56	1992–2009

Bez shrink-grow

(różnica może być widoczna tylko na węższym ekranie w Vector 2022)

Najwięcej występów w kadrze
#	Nazwisko	Mecze	Bramki	Lata gry w kadrze
1	Mohammed Nowak	178	0	1993–2006
2	Mohammed Nowak	163	3	1992–2001
3	Sami Nowak	156	46	1992–2006
4	Abdullah Zubromawi	142	3	1993–2002
5	Usama Hausawi	138	7	2006–2018
5	Hussein Sulaimani	138	5	1992–2009
7	Taisir Nowak	134	19	2004-2018
8	Saud Chariri	133	7	2001–2015
9	Mohamed Nowak	121	7	1981–1994
10	Mohammad Nowak	118	19	2000-2018

Najwięcej goli w kadrze
#	Nazwisko	Bramki	Mecze	Lata gry w kadrze
1	Majed Abdullah	71	116	1978–1994
2	Sami Nowak	46	156	1992–2006
3	Yasser Nowak	42	112	2002–2013
4	Obeid Nowak	41	94	1994–2002
5	Talal Nowak	32	60	1998–2006
6	Khalid Nowak	28	114	1988–1998
6	Mohammad Nowak	28	42	2010–
8	Fahad Nowak	26	87	1992–1999
9	Sa’id Kowalski	24	75	1992–1998
9	Ibrahim Ash-Shahrani	24	86	1997–2005
10	Hussein Kowalski	138	5	1992–2009

Zaawansowane

Klasa wikiflex jest oparta na układzie flexbox. Możesz dostosować ten układ do danego przypadku wprowadzając style elementu w CSS (np. align-items, justify-content). Domyślny CSS znajdziesz na MediaWiki:Gadget-wikiflex.css.

Przy projektowaniu zaawansowanych układów przydatna może być: ściągawka Flexbox na CSS Tricks oraz Flexbox Froggy – gra treningowa.

Klasy dodatkowe, narzędziowe:

shrink-grow – dobre do układania obok siebie elastycznych tabel, które powinny się kurczyć i rozszerzać według dostępnej szerokości. Bazowa wersja tej klasy ustawia bazową szerokość na 0, co oznacza, że elementy skurczą się tak bardzo jak tylko mogą (w praktyce do min-content)
base-* (* = s, m, l, xl, xxl, xxxl) – w połączeniu z klasą shrink-grow umożliwia układanie obok siebie bardziej ściśliwych elementów (zwłaszcza tekstu w listach). Odpowiednią klasę należy dobrać do konkretnego przypadku.

Stosując różne kombinacje można uzyskać poniższy układ. Takie struktury warto projektować w edytorze, który umożliwia upiększenie HTML i zwijanie elementów (np. Visual Studio Code).

Bramkarze

Jan Kowalski (Piast)
Karol Kowalski (Bałtyk)

Prawi obrońcy

Jan Wiśniewski (Legia)
Jan Kowalski (Lechia)

Prawi-środkowi obrońcy

Karol Kowalski (Siarka)
Jan Wiśniewski (Widzew)

Lewi-środkowi obrońcy

Jan Kowalski (Legia)
Jan Wiśniewski (Lechia)

Lewi obrońcy

Jan Kowalewski (Legia)
Jan Kowalski (Widzew)

Prawi pomocnicy

Jan Wiśniewski (Legia)
Jan Kowalski (Siarka)

Prawi-środkowi pomocnicy

Jan Kowalewski (Siarka)
Jan Kowalski (Widzew)

Lewi-środkowi pomocnicy

Jan Kowalski (Lechia)
Jan Wiśniewski (Siarka)

Lewi pomocnicy

Jan Kowalski (Legia)
Jan Kowalewski (Legia)

Prawi napastnicy

Jan Wiśniewski (Górnik)
Jan Kowalski (Górnik)

Lewi napastnicy

Jan Wiśniewski (Piast)
Karol Wiśniewski (Siarka)