Szablon:ElastycznyZawijanyWiersz/opis

Z Wikibooks, biblioteki wolnych podręczników.
Przejdź do nawigacji Przejdź do wyszukiwania

Użycie[edytuj]

Jest to szablon kontenera flex'owego wierszowego zawijanego, 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 jednym wierszu zawijanym n-dzieci rodzica flex'owego z opcjonalnym jawnym podaniem stylów, jak za pomocą jego zwykłej wersji przy pomocy kontenera elastycznego flex wierszowego pisanych za pomocą div'ów i stylów. Kolejne elementy pudełka są układane w jednym wierszu lub są zawijane do następnego. Przy czym poszczególne elementy numerowane szablonu są układane kolejno w tych dzieciach.

Kod zastępczy dla {{ElastycznyZawijanyWiersz}} w postaci div'ów[edytuj]

{{Div|styl=display:flex;flex-wrap:wrap;height:35px;max-width:300px;|
  {{Div|styl=background:red;width:25%;min-width:50px;height:25px;margin: auto 0 auto 0;|Zawartość jeden.}}
  {{Div|styl=background:blue;width:30%;min-width:100px;height:20px;margin: 0 0 auto 0;|Zawartość dwa.}}
  {{Div|styl=background:yellow;width:30%;min-width:70px;height:30px;margin: auto 0 0 0;|Zawartość trzy.}}
  {{Div|styl=background:gray;width:15%;min-width:150px;height:35px;|Zawartość ostatnia.}}
}}
  • Kod powyższy w działaniu jest taki:
Zawartość jeden.
Zawartość dwa.
Zawartość trzy.
Zawartość ostatnia.


Przykład[edytuj]

{{ElastycznyZawijanyWiersz
   |1=Zawartość jeden.
   |2=Zawartość dwa.
   |3=Zawartość trzy.
   |4=Zawartość ostatnia.
   |_1=background:red;width:25%;min-width:50px;height:25px;margin: auto 0 auto 0;
   |_2=background:blue;width:30%;min-width:100px;height:20px;margin: 0 0 auto 0;
   |_3=background:yellow;width:20%;min-width:70px;height:30px;margin: auto 0 0 0;
   |_4=background:gray;width:15%;min-width:150px;height:35px;
   |styl=height:35px;max-width:300px;
  }}
  • 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.


Widzimy, że wiersz jest zawijany do następnej linijki po przekroczeniu rozmiaru div-ów w jednym wierszu.

Opis parametrów[edytuj]

Jest to opis szablonu kontenera flex'owego wierszowego, 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:

{{ElastycznyZawijanyWiersz
  |  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: flex:1 0 auto;margin:auto 0 auto 0;width:auto;height:100%;)   
  | styl          = Styl rodzica (opcjonalny, domyślnie ustawiony na wartość pustą)
  | styl elementu = Styl poszczególnych elementów dzieci (opcjonalny, domyślnie wartość pusta)   
}}

Błędy[edytuj]

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

Parametry szablonu (strukturyzacja Wizualnego Edytora)[edytuj]

Szablon obsługujący flexbox'a szablonu {{ElastycznegoZawijanyWiersz}}, czyli jego elastyczne komórki są ułożone w poziomie w jednym wierszu lub zawijane do następnego wiersza w zależności od jego rozmiarów, przy czym kolejne elementy tego szablonu są wsadzane do poszczególnych dzieci opartych o <div>...</div>.

Parametry szablonu

ParametrOpisTypStatus
11

Zwartość pierwszej komórki flexbox'a.

Ciąg znakówwymagany
22

Zwartość drugiej komórki flexbox'a.

Ciąg znakówopcjonalny
33

Zwartość trzeciej komórki flexbox'a.

Ciąg znakówopcjonalny
44

Zwartość czwartej komórki Flexbox'a.

Ciąg znakówopcjonalny
55

Zwartość piątej komórki flexbox'a.

Ciąg znakówopcjonalny
66

Zwartość szóstej komórki flexbox'a.

Ciąg znakówopcjonalny
77

Zwartość siódmej komórki flexbox'a.

Ciąg znakówopcjonalny
88

Zwartość ósmej komórki flexbox'a.

Ciąg znakówopcjonalny
99

Zwartość dziewiątej komórki flexbox'a.

Ciąg znakówopcjonalny
1010

Zwartość dziesiątej komórki Flexbox'a.

Ciąg znakówopcjonalny
_1_1

Styl pierwszej komórki flexbox'a.

Ciąg znakówopcjonalny
_2_2

Styl drugiej komórki flexbox'a.

Ciąg znakówopcjonalny
_3_3

Styl trzeciej komórki flexbox'a.

Ciąg znakówopcjonalny
_4_4

Styl czwartej komórki flexbox'a.

Ciąg znakówopcjonalny
_5_5

Styl piątej komórki flexbox'a.

Ciąg znakówopcjonalny
_6_6

Styl szóstej komórki flexbox'a.

Ciąg znakówopcjonalny
_7_7

Styl siódmej komórki flexbox'a.

Ciąg znakówopcjonalny
_8_8

Styl ósmej komórki flexbox'a.

Ciąg znakówopcjonalny
_9_9

Styl dziewiątej komórki flexbox'a.

Ciąg znakówopcjonalny
_10_10

Styl dzięsiątej komórki flexbox'a.

Ciąg znakówopcjonalny
styl elementustyl elementu

Styl wspólny wszystkich komórek flexbox'a.

Ciąg znakówopcjonalny
stylstyl

Styl pudełka całego flexbox'a.

Ciąg znakówopcjonalny

Zobacz też[edytuj]

Kontenery flexbox'a wyświetlane w jednym wierszu, niezależnie od rozmiarów wiersza
  • {{ElastycznyWiersz}} - szablon wstawiający poszczególne zawartości poszczególnych komórek flexbox'a do poszczególnych ramek opartych o tag: <div>...</div>, którym można nadać styl wspólny ogólny lub style charakterystyczne dla każdej jego komórki,
  • {{ElastycznyWiersz2}} - szablon wstawiający poszczególne zawartości poszczególnych komórek flexbox'a opartych o ramki o tag: <div>...</div>, do ogólnego pudełka, któremu można dać styl pudełkowy.

Kontenery flexbox'a wyświetlane w jednym wierszu lub w zależności od rozmiaru wiersza zawijany, by się w nim zmieścił
  • {{ElastycznyZawijanyWiersz}} - szablon wstawiający poszczególne zawartości poszczególnych komórek zawijanego flexbox'a do poszczególnych ramek opartych o tag: <div>...</div>, którym można nadać styl wspólny ogólny lub style charakterystyczne dla każdej jego komórki,
  • {{ElastycznyZawijanyWiersz2}} - szablon wstawiający poszczególne zawartości poszczególnych komórek zawijanego flexbox'a opartych o ramki o tag: <div>...</div>, do ogólnego pudełka, któremu można dać styl pudełkowy.