Template:Flexbox

Template documentation[view] [edit] [history] [purge]

{{Flexbox
|min-width= |max-width= |padding= |style=
|1=
|2=
|3=
|...
}}

This template is a CSS flexbox that places up to 15 content blocks of equal height and width in a row, allowing line wraps if the total content size exceeds the display width. The following settings can be adjusted:

• Flexbox CSS style: use the parameter |style=
• Minimum and maximum width of the content blocks: use the parameters |min-width= and |max-width=
• Cell padding of the content blocks: use the parameter |padding=

Example

Standard settings

{{Flexbox
|'''Block 1'''
* Item 1
|'''Block 2'''
* Item 1
* Item 2
* Item 3
|'''Block 3'''
* Item 1
* Item 2
|'''Block 4'''
* Item 1
* Item 2
|'''Block 5'''
* Item 1
}}

Block 1

• Item 1

Block 2

• Item 1
• Item 2
• Item 3

Block 3

• Item 1
• Item 2

Block 4

• Item 1
• Item 2

Block 5

• Item 1

Adjusted settings

{{Flexbox |min-width=300px |max-width=300px |padding=0.5em 1em 0.5em 1em |style=border:#ccc 1px solid;
|'''Block 1'''
* Item 1
|'''Block 2'''
* Item 1
* Item 2
* Item 3
|'''Block 3'''
* Item 1
* Item 2
|'''Block 4'''
* Item 1
* Item 2
|'''Block 5'''
* Item 1
}}

Block 1

• Item 1

Block 2

• Item 1
• Item 2
• Item 3

Block 3

• Item 1
• Item 2

Block 4

• Item 1
• Item 2

Block 5

• Item 1

The above documentation is transcluded from Template:Flexbox/doc. (edit | history)
Editors can experiment in this template's sandbox (create | mirror) and testcases (create) pages.
Add categories to the /doc subpage. Subpages of this template.