Template:Flexitem

{{flexitem}} creates a <div> item, which can be used inside a {{flexheader}} container or on its own

Template parameters[Edit template data]

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 Default FFFFFF00	Line	suggested
Border	border	Border style for the time Default none	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

View or edit this documentation. (About template documentation)

Note: portions of the template sample may not be visible without values provided.

{{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 the c, l etc. 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}}

Bulbasaur

Charmander

Squirtle

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}}

Bulbasaur

Charmander

Squirtle