Template:Flexitem
From Bulbapedia, the community-driven Pokémon encyclopedia.
Jump to navigationJump to search
{{flexitem}} creates a <div> item, which can be used inside a {{flexheader}} container or on its own
| Parameter | Description | Type | Status | |
|---|---|---|---|---|
| Class | class | Classes that should apply to this item. Separate multiple classes with spaces. | Line | suggested |
| Background Color | background | A color template for the background. Needs color template or Hex Code
| Line | suggested |
| Border | border | Border style for the time
| Line | suggested |
| Extra Styles | extra-style | Any extra styles that should be applied. Need to be valid inline css styles. | Line | suggested |
| Content | 1 content | The content of the flex item | String | required |
Template documentation
|
|---|
| Note: portions of the template sample may not be visible without values provided. |
| View or edit this documentation. (About template documentation) |
{{Flexitem}} is to create a </div> item which can be placed inside a flexible container created by {{flexheader}}, or by itself.
Usage
{{Flexheader}}
{{Flexitem
|class=
|background=
|border=
|extra-style=
|
}}
(include as many items as desired)
{{Flexfooter}}
Template fields
- class - Any Bulbapedia CSS class that should be applied. Examples are
roundy,blacklinks,whitelinks,c,l, etc. Separate multiple class with spaces. - background - Sets the background color. Can be a valid hex code or color template
- border - Sets the border color and style.
- extra-style - Any extra styles that need to be applied to the block. These need to be valid inline CSS styles. Separate multiple styles with a semi-colon (
;).
- Examples include but are not limited to:
- margin - Space between this block and outside items.
- padding - Space between the block border and inside items.
- text-align -
left,center, etc. (This can also be set using thec,letc. classes.) - overflow - When set to hidden, which not display anything which extends beyond the item's border. Useful for clipping edges of non-transparent images.
- 1(first unnamed parameter) or content - The content inside the flexitem.
Examples
- Simple Example
{{Flexheader}}
{{Flexitem| [[File:0001Bulbasaur.png|x100px]] <br> {{p|Bulbasaur}} }}
{{Flexitem| [[File:0004Charmander.png|x100px]] <br> {{p|Charmander}} }}
{{Flexitem| [[File:0007Squirtle.png|x100px]] <br> {{p|Squirtle}} }}
{{Flexfooter}}
- Fancy example
{{Flexheader|gap=10px|justify-content=space-evenly|class=roundy|extra-style=border: 2px solid #{{kanto color}}; padding:2px}}
{{Flexitem|class=roundy|background={{grass color light}}|border=2px solid #{{grass color dark}}|extra-style=text-align: center|
[[File:0001Bulbasaur.png|x100px]] <br> {{p|Bulbasaur}}
}}
{{Flexitem|class=roundy|background={{fire color light}}|border=2px solid #{{fire color dark}}|extra-style=text-align: center|
[[File:0004Charmander.png|x100px]] <br> {{p|Charmander}}
}}
{{Flexitem|class=roundy|background={{water color light}}|border=2px solid #{{water color dark}}|extra-style=text-align: center|
[[File:0007Squirtle.png|x100px]] <br> {{p|Squirtle}}
}}
{{Flexfooter}}
