Szablon:ElastycznyZawijanyWiersz
Użycie
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
- Przykład dla kodu pisanego za pomocą div'ów jako odpowiednik kontenera szablonowego {{ElastycznyZawijanyWiersz}}:
{{Div|styl=display:flex;flex-wrap:wrap;height:65px;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:
Przykład
- Ten sam kod, co powyżej, możemy napisać za pomocą szablonu {{ElastycznyZawijanyWiersz}}, wtedy:
{{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:65px;max-width:300px;
}}
- A powyższy kod w działaniu jest taki sam, co za pomocą div'ów, a więc:
Widzimy, że wiersz jest zawijany do następnej linijki po przekroczeniu rozmiaru div-ów w jednym wierszu.
Opis parametrów
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%;)
| __1 = | __2 = | __3 = |... = Zestaw reguł kaskadowych arkuszy stylów, 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 poszczególnych elementów 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 {{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>.
Parametr | Opis | Typ | Status | |
---|---|---|---|---|
1 | 1 | Zwartość pierwszej komórki kontenera flexbox'a. | Ciąg znaków | wymagany |
2 | 2 | Zwartość drugiej komórki kontenera flexbox'a. | Ciąg znaków | opcjonalny |
3 | 3 | Zwartość trzeciej komórki kontenera flexbox'a. | Ciąg znaków | opcjonalny |
4 | 4 | Zwartość czwartej komórki kontenera flexbox'a. | Ciąg znaków | opcjonalny |
5 | 5 | Zwartość piątej komórki kontenera flexbox'a. | Ciąg znaków | opcjonalny |
6 | 6 | Zwartość szóstej komórki kontenera flexbox'a. | Ciąg znaków | opcjonalny |
7 | 7 | Zwartość siódmej komórki kontenera flexbox'a. | Ciąg znaków | opcjonalny |
8 | 8 | Zwartość ósmej komórki kontenera flexbox'a. | Ciąg znaków | opcjonalny |
9 | 9 | Zwartość dziewiątej komórki kontenera flexbox'a. | Ciąg znaków | opcjonalny |
10 | 10 | Zwartość dziesiątej komórki kontenera flexbox'a. | Ciąg znaków | opcjonalny |
_1 | _1 | Styl pierwszej komórki kontenera flexbox'a. | Ciąg znaków | opcjonalny |
_2 | _2 | Styl drugiej komórki kontenera flexbox'a. | Ciąg znaków | opcjonalny |
_3 | _3 | Styl trzeciej komórki kontenera flexbox'a. | Ciąg znaków | opcjonalny |
_4 | _4 | Styl czwartej komórki kontenera flexbox'a. | Ciąg znaków | opcjonalny |
_5 | _5 | Styl piątej komórki kontenera flexbox'a. | Ciąg znaków | opcjonalny |
_6 | _6 | Styl szóstej komórki kontenera flexbox'a. | Ciąg znaków | opcjonalny |
_7 | _7 | Styl siódmej komórki kontenera flexbox'a. | Ciąg znaków | opcjonalny |
_8 | _8 | Styl ósmej komórki kontenera flexbox'a. | Ciąg znaków | opcjonalny |
_9 | _9 | Styl dziewiątej komórki kontenera flexbox'a. | Ciąg znaków | opcjonalny |
_10 | _10 | Styl dzięsiątej komórki kontenera 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ż
- 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.
|
Powyższy opis jest dołączany ze strony Szablon:ElastycznyZawijanyWiersz/opis. (edytuj | historia)
Kategorie należy dodawać do podstrony /opis. Zobacz podstrony tego szablonu. |