Template:Div flex row/doc

From MOASSpedia
Jump to navigation Jump to search

Usage

{{Div flex row}} provides a simple way to create a horizontal alignment for related page elements (producing multiple rows if the screen is too narrow). A closing {{Div flex row end}} is required after the final item being aligned.

Free text content needs to be encased in div tags in order to create the rows and columns. If this is required, the |div o=y parameter, inserting an opening div tag, may be used in conjunction with the {{Div CO}} template, inserting a closing and opening div tag:

Source

{{Div flex row |div o=y}}
Some content.
{{Div CO}}
Some more content.
{{Div CO}}
A third thing.
{{Div flex row end|div c=y}}

Result

Some content.

Some more content.

A third thing.

Examples

Three tables next to each other

{{Div flex row}}
<!--STANDARD TABLE MARKUP-->
{| class="wikitable"
|+ First table
|-
! Header text !! Header text !! Header text
|-
| Example || Example || Example
|-
| Example || Example || Example
|-
| Example || Example || Example
|}
{| class="wikitable"
|+ Second table

...

|-
| Example || Example || Example
|}
{{Div flex row end}}
First table
Header text Header text Header text
Example Example Example
Example Example Example
Example Example Example
Second table
Header text Header text Header text
Example Example Example
Example Example Example
Example Example Example
Third table
Header text Header text Header text
Example Example Example
Example Example Example
Example Example Example

A table next to a related map.

{{Div flex row|align-items=center}}
<!--STANDARD TABLE MARKUP-->
{| class="wikitable"
|+ Launch rollout timeline
! scope="col" | Launch date
! scope="col" | Country / Territory
|-
| rowspan="20" scope="row" | 13 February
| {{Flagu|Australia}}
|-
| {{Flagu|Austria}}
|-
| {{Flagu|Belgium}}

...

| {{Flagu|South Korea}}
|-
| {{Flagu|Tunisia}}
|}
<!--THE MAP AND ITS FRAME-->
{{image frame|align=none|content=
{{Highlighted world map by country
|AU=#ff1d65 |AT=#ff1d65 |BE=#ff1d65 

...

|KR=#ff9800 |TN=#ff9800
|scale=75 |projection=mercator}}
|caption={{Legend|#ff1d65|13 February}} {{Legend|#ff9800|20 April}}
}}
{{Div flex row end}}
Launch rollout timeline
Launch date Country / Territory
13 February  Australia
 Austria
 Belgium
 Denmark
 Finland
 France
 Germany
 Iceland
 Ireland
 Italy
 Luxembourg
 Netherlands
 New Zealand
 Norway
 Portugal
 Singapore
 Spain
 Sweden
  Switzerland
 United Kingdom
20 April
 Hong Kong
 India
 Japan
 Morocco
 South Korea
 Tunisia
<graph>{"version":2,"height":1,"marks":[{"type":"path","properties":{"enter":{"path":{"field":"layout_path"}},"update":{"fill":{"field":"zipped.v"}},"hover":{"fill":{"value":"darkgrey"}}},"from":{"data":"countries"}}],"data":[{"name":"highlights","values":[{"id":"IN","v":"#ff9800"},{"id":"DE","v":"#ff1d65"},{"id":"FI","v":"#ff1d65"},{"id":"BE","v":"#ff1d65"},{"id":"LU","v":"#ff1d65"},{"id":"GB","v":"#ff1d65"},{"id":"NZ","v":"#ff1d65"},{"id":"IE","v":"#ff1d65"},{"id":"MA","v":"#ff9800"},{"id":"DK","v":"#ff1d65"},{"id":"AT","v":"#ff1d65"},{"id":"AU","v":"#ff1d65"},{"id":"SG","v":"#ff1d65"},{"id":"SE","v":"#ff1d65"},{"id":"KR","v":"#ff9800"},{"id":"JP","v":"#ff9800"},{"id":"HK","v":"#ff9800"},{"id":"CH","v":"#ff1d65"},{"id":"IT","v":"#ff1d65"},{"id":"ES","v":"#ff1d65"},{"id":"FR","v":"#ff1d65"},{"id":"TN","v":"#ff9800"},{"id":"IS","v":"#ff1d65"},{"id":"PT","v":"#ff1d65"},{"id":"NO","v":"#ff1d65"},{"id":"NL","v":"#ff1d65"}]},{"transform":[{"type":"geopath","translate":[0,0],"value":"data","projection":"mercator","scale":75},{"onKey":"id","type":"lookup","default":{"v":"silver"},"keys":["id"],"on":"highlights","as":["zipped"]}],"url":"wikiraw:///Template%3AGraph%3AMap%2FInner%2FWorldmap2c-json","name":"countries","format":{"feature":"countries","type":"topojson"}}],"width":1}</graph>
  13 February
  20 April

A template to help create horizontal groupings of related content.

Template parameters

ParameterDescriptionTypeStatus
Wrapwrap

A pass-through for the CSS "flex-wrap" property.

Default
wrap
Example
wrap=wrap-reverse
Stringoptional
Align itemsalign-items

A pass-through for the CSS "align-items" property.

Example
align-items=center
Stringoptional
Justify contentjustify-content

A pass-through for the CSS "justify-content" property.

Example
justify-content=center
Stringoptional
Opening divdiv o

An opening div tag for the first block of content. Some content (such as free text) requires this to create the blocks used for the columns and rows.

Example
div o=y
Booleanoptional
Gapgap

The flexbox gap parameter, which specifies a minimum spacing between items; a CSS length value. Units of "em" are recommended.

Default
0.8em
Stringoptional

See also