Szablon:ElastycznaKolumna

 Dokumentacja szablonu [zobacz] [edytuj] [historia] [odśwież]

Użycie

Jest to szablon kontenera flex'owego kolumnowego, który może posiadać jako rodzic, aż dowolną liczbę dzieci div'owych. Jest on używany jako kontener elastyczny, w którym chcemy umieścić w jednej kolumnie n-dzieci rodzica flex'owego z opcjonalnym jawnym podaniem stylów, jak za pomocą jego zwykłej wersji przy pomocy kontenera elastycznego flex kolumnowego pisanych za pomocą div'ów i stylów. Przy czym poszczególne elementy numerowane szablonu są układane kolejno w tych dzieciach.

Kod zastępczy dla {{ElastycznaKolumna}} w postaci div'ów

• Przykład dla kodu pisanego za pomocą div'ów jako odpowiednik kontenera szablonowego {{ElastycznaKolumna}}:

 {{Div|styl=display:flex;flex-direction:column;height:100px;width:250px;|
    {{Div|styl=background:red;height:100%;width:150px;margin: 0 auto 0 auto;|Zawartość jeden.}}
    {{Div|styl=background:blue;height:50%;width:130px;margin: 0 0 0 auto;|Zawartość dwa.}}
    {{Div|styl=background:yellow;height:70%;width:130px;margin: 0 auto 0 0;|Zawartość trzy.}}
    {{Div|styl=background:gray;height:80%;width:250px;|Zawartość ostatnia.}}
 }}

• Kod powyższy w działaniu jest taki:

Zawartość jeden.

Zawartość dwa.

Zawartość trzy.

Zawartość ostatnia.

Przykład

• Ten sam kod, co powyżej, możemy napisać za pomocą szablonu {{ElastycznaKolumna}}, wtedy:

{{ElastycznaKolumna
  |1=Zawartość jeden.
  |2=Zawartość dwa.
  |3=Zawartość trzy.
  |4=Zawartość ostatnia.
  |_1=background:red;height:100%;width:150px;margin: 0 auto 0 auto;
  |_2=background:blue;height:50%;width:130px;margin: 0 0 0 auto;
  |_3=background:yellow;height:70%;width:130px;margin: 0 auto 0 0;
  |_4=background:gray;height:80%;width:250px;
  |styl=height:100px;width:250px;
}}

• A powyższy kod w działaniu jest taki sam, co za pomocą div'ów, a więc:

Zawartość jeden.

Zawartość dwa.

Zawartość trzy.

Zawartość ostatnia.

Opis parametrów

Jest to opis szablonu kontenera flex'owego kolumnowego, który może posiadać jako rodzic, aż dowolną liczbę dzieci div'owych (od 1 do wzwyż), którym odpowiadają od jeden do wzwyż styli (od _1 do wzwyż) przyporządkowanym tym poszczególnym dzieciom i parametr stylu div'a flexowego styl :

{{ElastycznaKolumna
  |   1 =  |   2 =  |   3 = |... = Zawartość pierwszego, drugiego i wzwyż dalszych dzieci rodzica (opcjonalny, domyślnie równa wartości pustej)
  |  _1 =  |  _2 =  |  _3 = |... = Style pierwszego, drugiego i wzwyż dalszych dzieci rodzica (opcjonalny, domyślnie ustawiony na: width:100%;height:auto;)
  | __1 =  | __2 =  | __3 = |... = Zestaw reguł kaskadowych arkuszy stylów CSS dla odpowiednich komórek kontenera (opcjonalny)
  | styl          =  Styl rodzica (opcjonalny, domyślnie ustawiony na wartość pustą)
  | klasa         =  Zestaw reguł, w arkuszu kaskadowym stylów CSS, dla rodzica (opcjonalny).
  | styl elementu =  Styl elementu poszczególnych dzieci (opcjonalny, domyślnie wartość pusta)   
}}

Błędy

Błędy należy zgłaszać na stronie Wikibooks:Kwestie techniczne.

Parametry szablonu (strukturyzacja Wizualnego Edytora)

Szablon obsługujący flexbox'a szablonu {{ElastycznegoKolumna}}, czyli jego elastyczne komórki kontenera flexbox'a są ułożone w pionie, przy czym kolejne elementy tego szablonu są wsadzane do poszczególnych dzieci opartych o <div>...</div>.

Parametry szablonu[Zarządzaj danymi szablonu]

Parametr		Opis	Typ	Status
1	1	Zwartość pierwszej komórki kontenera flexbox'a flexbox'a.	Ciąg znaków	wymagany
2	2	Zwartość drugiej komórki kontenera flexbox'a flexbox'a.	Ciąg znaków	opcjonalny
3	3	Zwartość trzeciej komórki kontenera flexbox'a flexbox'a.	Ciąg znaków	opcjonalny
4	4	Zwartość czwartej komórki kontenera flexbox'a Flexbox'a.	Ciąg znaków	opcjonalny
5	5	Zwartość piątej komórki kontenera flexbox'a flexbox'a.	Ciąg znaków	opcjonalny
6	6	Zwartość szóstej komórki kontenera flexbox'a flexbox'a.	Ciąg znaków	opcjonalny
7	7	Zwartość siódmej komórki kontenera flexbox'a flexbox'a.	Ciąg znaków	opcjonalny
8	8	Zwartość ósmej komórki kontenera flexbox'a flexbox'a.	Ciąg znaków	opcjonalny
9	9	Zwartość dziewiątej komórki kontenera flexbox'a flexbox'a.	Ciąg znaków	opcjonalny
10	10	Zwartość dziesiątej komórki kontenera flexbox'a Flexbox'a.	Ciąg znaków	opcjonalny
_1	_1	Styl pierwszej komórki kontenera flexbox'a flexbox'a.	Ciąg znaków	opcjonalny
_2	_2	Styl drugiej komórki kontenera flexbox'a flexbox'a.	Ciąg znaków	opcjonalny
_3	_3	Styl trzeciej komórki kontenera flexbox'a flexbox'a.	Ciąg znaków	opcjonalny
_4	_4	Styl czwartej komórki kontenera flexbox'a flexbox'a.	Ciąg znaków	opcjonalny
_5	_5	Styl piątej komórki kontenera flexbox'a flexbox'a.	Ciąg znaków	opcjonalny
_6	_6	Styl szóstej komórki kontenera flexbox'a flexbox'a.	Ciąg znaków	opcjonalny
_7	_7	Styl siódmej komórki kontenera flexbox'a flexbox'a.	Ciąg znaków	opcjonalny
_8	_8	Styl ósmej komórki kontenera flexbox'a flexbox'a.	Ciąg znaków	opcjonalny
_9	_9	Styl dziewiątej komórki kontenera flexbox'a flexbox'a.	Ciąg znaków	opcjonalny
_10	_10	Styl dzięsiątej komórki kontenera flexbox'a flexbox'a.	Ciąg znaków	opcjonalny
__1	__1	Zestaw reguł kaskadowych arkuszy stylów CSS dla pierwszej komórki kontenera flexbox'a.	Ciąg znaków	opcjonalny
__2	__2	Zestaw reguł kaskadowych arkuszy stylów CSS dla drugiej komórki kontenera flexbox'a.	Ciąg znaków	opcjonalny
__3	__3	Zestaw reguł kaskadowych arkuszy stylów CSS dla trzeciej komórki kontenera flexbox'a.	Ciąg znaków	opcjonalny
__4	__4	Zestaw reguł kaskadowych arkuszy stylów CSS dla czwartej komórki kontenera flexbox'a.	Ciąg znaków	opcjonalny
__5	__5	Zestaw reguł kaskadowych arkuszy stylów CSS dla piątej komórki kontenera flexbox'a.	Ciąg znaków	opcjonalny
__6	__6	Zestaw reguł kaskadowych arkuszy stylów CSS dla szóstej komórki kontenera flexbox'a.	Ciąg znaków	opcjonalny
__7	__7	Zestaw reguł kaskadowych arkuszy stylów CSS dla siódmej komórki kontenera flexbox'a.	Ciąg znaków	opcjonalny
__8	__8	Zestaw reguł kaskadowych arkuszy stylów CSS dla ósmej komórki kontenera flexbox'a.	Ciąg znaków	opcjonalny
__9	__9	Zestaw reguł kaskadowych arkuszy stylów CSS dla dziewiątej komórki kontenera flexbox'a.	Ciąg znaków	opcjonalny
__10	__10	Zestaw reguł kaskadowych arkuszy stylów CSS dla dziesiątej komórki kontenera flexbox'a.	Ciąg znaków	opcjonalny
styl elementu	styl elementu	Styl wspólny wszystkich komórek flexbox'a.	Ciąg znaków	opcjonalny
styl	styl	Styl pudełka całego flexbox'a.	Ciąg znaków	opcjonalny
klasa	klasa	Zestaw reguł w arkuszu kaskadowym stylów CSS.	Ciąg znaków	opcjonalny

Zobacz też

• {{ElastycznaKolumna}} - elastyczna kolumna zbudowana za pomocą flexbox'a, komórki są oparte o <div>...</div> i ułożone w pionie, zawartości elementów szablonu są do nich wsadzane.
• {{ElastycznaKolumna2}} - elastyczna kolumna zbudowana za pomocą flexbox'a, komórki są ułożone w pionie, zawartości elementów szablonu zawierają własne <div>...</div>, które są dodawane do niego.