Template:Flexheader

---

Template documentation
Note: portions of the template sample may not be visible without values provided.
View or edit this documentation. (About template documentation)

{{Flexheader}} is to create a flexible layout using CSS Flexbox - the items will distribute horizontally on wider screens, and vertically on narrower screens.
The container is created using {{flexheader}} and should be closed with {{flexfooter}} or </div>.

Each item inside the flex container should be block level elements, which can be created with {{flexitem}}.

Usage

{{Flexheader
|gap=
|align-items=
|justify-content=
|extra-style=
}}

{{Flexitem}} (include as many items as desired)

{{Flexfooter}}

Functionality

• Between {{Flexheader}} and {{Flexfooter}}, include multiple items, created using {{Flexitem}} or similar templates, or using <div> or similar HTML tags.
• The set of items will be formatted in a flexible layout with wrapping. By default, the items will be centered horizontally, and will be aligned vertically at the top edge of each item. This can be customized (see Template fields below).
• On wider screens, all items will be in the same row, while on narrower screens, items that do not fit in this row will wrap to the next row.

Template fields

• gap - The desired gap between items. Defaults to 4px. If an invalid value is provided, it uses 0px.
  • If one value is provided, then it will be applied to both the gaps between rows and the gaps between columns.
  • If two values are provided, the first value will be applied to the gaps between rows, and the second value will be applied to the gaps between columns.
• align-items - If the items have different heights, this determines how they are vertically aligned. This value is fed into the "align-items" CSS property. Valid values are described below:
  • start - Vertically align items along their top edges.
  • center - Vertically align items along the middle of their heights.
  • end - Vertically align items along their bottom edges.
  • stretch - Vertically stretch all small items to have the same height as the tallest item.
  • This field defaults to start. If an invalid value is provided, it uses stretch.
• justify-content - Aligns items horizontally on the screen. This value is fed into the "justify-content" CSS property. Valid values are described below:
  • start - Align items at the far left of the screen.
  • center - Align items at the horizontal center of the screen.
  • end - Align items at the far right of the screen.
  • space-between - Align items such that spacing between any two items is equal. First and last items will touch the edges.
  • space-around - Align items such that spacing between any two items is equal, and the space to the edges will be half the space between two items.
  • space-evenly - Align items such that the spacing between any two items and the space to the edges is equal. This option will perfectly distribute the items.
  • This field defaults to "center". If an invalid value is provided, it uses "start".
• class - Any Bulbapedia CSS class that should be applied. Examples are roundy, blacklinks, whitelinks, l, c, etc. Separate multiple classes with spaces.
• extra-style - Any extra styles that need to be applied to the container. These need to be valid inline CSS styles. Separate multiple styles with a semi-colon (;).

Examples include but are not limited to:

• background or background-color - Sets the background color. Can be a valid hex code or color template.
• border - Sets the border color and style.
• margin - Space between this container and outside items.
• padding - Space between the container border and inside items.
• text-align - left, center, etc. (This can also be set using the l, c, etc. classes.)

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

Template data

{{flexheader}} is used for creating a flexible set - the items will distribute horizontally on wider screens, and vertically on narrower screens. It should be used along with {{flexfooter}}. The content inside can be created with multiple {{flexitem}}s

Template parameters

This template prefers inline formatting of parameters.

Parameter		Description	Type	Status
Align-Items	align-items	Vertical alignment of the items Suggested values start center end stretch Default start	Line	suggested
Gap	gap	Desired gap between items Default 4px	Line	suggested
Justify-Content	justify-content	Horizontal alignment of the items Suggested values start center end space-evenly Default center	Line	suggested
Class	class	Classes that should apply to this item. Separate multiple classes with spaces.	Line	suggested
Extra Styles	extra-style	Any extra styles that should be applied. Need to be valid inline css styles.	Line	suggested

Notes and references