Template:Flexheader: Difference between revisions

{{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, the it will be applied to both the gap between rows and gap between columns.
  • If two values are provided, first value will be applied to gap between rows, and second value will be applied to gap between columns.
• 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.^[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, c, l, etc. Separate multiple class 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 c, l 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}}

Notes and References