Template:Flexheader

From Bulbapedia, the community-driven Pokémon encyclopedia.
Revision as of 04:04, 6 May 2024 by Tiddlywinks (talk | contribs) (template data should be in doc where possible so the template stays as clean as possible)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigationJump to search




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[1] - 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.[2] 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.[3] 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}}
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}}

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.

ParameterDescriptionTypeStatus
Align-Itemsalign-items

Vertical alignment of the items

Suggested values
start center end stretch
Default
start
Linesuggested
Gapgap

Desired gap between items

Default
4px
Linesuggested
Justify-Contentjustify-content

Horizontal alignment of the items

Suggested values
start center end space-evenly
Default
center
Linesuggested
Classclass

Classes that should apply to this item. Separate multiple classes with spaces.

Linesuggested
Extra Stylesextra-style

Any extra styles that should be applied. Need to be valid inline css styles.

Linesuggested

Notes and references