Template:Flexheader
This template is to be used for listing info box items in a flexible set - the items will distribute horizontally on wider screens, and vertically on narrower screens.
This must be used in combination with Template:Flexfooter.
Usage
{{Flexheader
|gap=
|align-items=
|justify-content=
}}
(include as many inline-formatted items as desired)
{{Flexfooter}}
Functionality:
- Between {{Flexheader}} and {{Flexfooter}}, include a list of inline-formatted items (example: Instances of Template:TypeProperties).
- The set of items will be formatted as a flex with wrapping, 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 wide screens such as on desktop, the items will display horizontally. If there are too many items to display horizontally given the screen size, they 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.
- align-items - If the items have different heights, this determine 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.
- This field defaults to "center". If an invalid value is provided, it uses "start".
Examples
{{Flexheader}}
{{TypeProperties|type=Fighting|prop=Off
|se={{TypeIcon|Ice}}{{TypeIcon|Normal}}{{TypeIcon|Rock}}
|nve={{TypeIcon|Bug}}{{TypeIcon|Fairy}}{{TypeIcon|Flying}}{{TypeIcon|Poison}}{{TypeIcon|Psychic}}
|immune={{TypeIcon|Ghost}}
}}
{{TypeProperties|type=Fighting|prop=Def
|se={{TypeIcon|Fairy}}{{TypeIcon|Flying}}{{TypeIcon|Psychic}}
|nve={{TypeIcon|Bug}}{{TypeIcon|Rock}}
}}
{{Flexfooter}}
