Template:Flexbox
Template documentation follows |
---|
Note: the template above may sometimes be partially or fully invisible. |
Visit Template:Flexbox/doc to edit this documentation. (How does this work?) |
A set of templates for flexbox layout. they can be used to replace table layout in certain situations for better responsive layout. It is more flexible and has better readability, especially on small width screen, such as smartphone.
Usage
The simplest usage is to use the contents as parameter:
{{flexbox | <contents>}}
{{flexbox | <content1><content2><content3>}}
{{flexbox | <content1> | <content2>| <content3> }}
{{flexbox| inline=y | <content1><content2>}}
{{flexbox| inline=y | <content1> | <content2>}}
but, {{flexbox}}
cannot be used recursively, and/or the presence of certain characters in the parameters may output unintented results, Therefore, using {{flexstart}}
and {{flexend}}
to do so is recommended:
{{flexstart}}<contents>{{flexend}}
{{flexstart|inline}}<contents>{{flexend}}
If needed, you can explicitly define flexitem and take control on them:
{{flexstart}} {{flexitem|<contents>}}<!-- use the contents as parameter --> {{flexstart|item}}<contents>{{flexend}}<!-- use {{t|flexstart}} and {{t|flexend}} (recommended) --> {{flexstart|item|order=2}}<contents>{{flexend}} {{flexstart|item|order=1}}<contents>{{flexend}} {{flexend}}
Flexbox can be nested, a flexitem can also be a flexbox, In this way, a very complex layout can be achieved:
{{flexstart}} {{flexstart|}}<!-- flexitem as flexbox --> {{flexstart|item}}<contents>{{flexend}} {{flexstart|box}}<!-- Can be explicitly specified for better readability --> {{flexstart|item}}<contents>{{flexend}} {{flexstart|item}}<contents>{{flexend}} {{flexend}} {{flexstart|item-box}}<!-- same as 'box', just for better readability --> {{flexstart|item}}<contents>{{flexend}} {{flexstart|item}}<contents>{{flexend}} {{flexend}} {{flexstart|inlinebox}}<!-- Can also be inline flexbox --> {{flexstart|item}}<contents>{{flexend}} {{flexstart|item}}<contents>{{flexend}} {{flexend}} {{flexend|}} {{flexstart}}<contents>{{flexend}} {{flexstart}}<contents>{{flexend}} {{flexend}}
Parameters
Almost all parameters about flexbox and flexitem are mapped to the corresponding CSS properties. So all valid values for that CSS property can be used as value of the parameter.
{{flexstart}}
has the following parameters available:
- Type declaration:
- unnamed parameter 1: Can be
box
,inline
,inlinebox
,item
, correspond to flexbox, inline-flexbox, flexitem, respectively.inlinebox
is alias ofinline
.Default value isbox
.
- unnamed parameter 1: Can be
- General parameters:
- cssclass: Css class(es), class attribute for html element. When presented, will be used for
class="[cssclass]"
. - id: Id attribute for html element. When presented, will be used for
id="[id]"
. - width: Css width value. It actually set css
width
porperty. - height: Css height value. It actually set css
height
porperty. - css or style: Custom css rules. When both presented, css will take precedence over style. Custom css rules will overide css rules from other parameters.
- cssclass: Css class(es), class attribute for html element. When presented, will be used for
- Parameters for flexbox:
- wrap: Controls whether the flexbox is single-line or multi-line. It actually set css
flex-wrap
porperty. Can beyes
/no
or any valid value for cssflex-wrap
property.yes
is alias of css valuewrap
, andno
is alias ofnowrap
. Default value iswrap
. - direction: specifies how flex items are placed in the flexbox, by setting the direction of the flexbox's main axis. This determines the direction in which flex items are laid out in. Values can be
row
(default),row-reverse
,column
,column-reverse
. - justify: How content items will justified inline. It actually set css
justify-content
porperty. Can beleft
/center
/right
/justified
or other valid value for cssjustify-content
property.left
is alias of css valueflex-start
,right
is alias offlex-end
, andjustified
is alias ofspace-between
. Default value isleft
. - alignitems: How content items will vertical aligned in current line of flexbox. It actually set css
align-items
porperty. Can betop
/middle
/bottom
or other valid value for cssalign-items
property.top
is alias of css valueflex-start
,middle
is alias ofcenter
, andbottom
is alias offlex-end
. Default value isstretch
. - alignlines: Aligns a flexbox's lines within the flexbox when there is extra space in the cross-axis, similar to how
justify
aligns individual items within the main axis. Note that this has no effect when the flexbox has only a single line.top
is alias of css valueflex-start
,bottom
is alias offlex-end
, andjustified
is alias ofspace-between
. Default value istop
.
- wrap: Controls whether the flexbox is single-line or multi-line. It actually set css
- parameters for flexitem:
- order: CSS order property. example:
order=3
- grow: CSS flex-grow property. example:
grow=1
- shrink: CSS flex-shrink property.
- basis: CSS flex-basis property.
- alignself: CSS align-self property. Used to control the way this item is aligned on cross axis(Typically vertical), override the alignitems of
{{flexbox}}
. You can usetop
/middle
/bottom
as its value,top
is alias of css valueflex-start
,middle
is alias ofcenter
, andbottom
is alias offlex-end
. Default value isstretch
.
- order: CSS order property. example:
General parameters and Parameters for flexbox are also available on {{flexbox}}
, General parameters and Parameters for flexitem are also available on {{flexitem}}
.
{{flexend}}
have no defined parameter.
Dummy parameter
You can use dummy parameter to help locate pairs:
{{flexstart|_id=outer}} {{flexstart|_id=inner}} <content> {{flexend|_id=inner}} {{flexend|_id=outer}}
Examples
Basic
{{flexstart}} {{hero infobox|boxwidth=20em | name = Aisling }} {{hero infobox|boxwidth=20em | name = Beckett }} {{hero infobox|boxwidth=20em | name = Charnok }} {{hero infobox|boxwidth=20em | name = Ezren Ghal }} {{hero infobox|boxwidth=20em | name = Griselma }} {{hero infobox|boxwidth=20em | name = HK-206 }} {{hero infobox|boxwidth=20em | name = Imani }} {{hero infobox|boxwidth=20em | name = Kajir }} {{hero infobox|boxwidth=20em | name = Lord Knossos }} {{flexend}}
or
{{flexbox| {{hero infobox|boxwidth=20em | name = Aisling }} {{hero infobox|boxwidth=20em | name = Beckett }} {{hero infobox|boxwidth=20em | name = Charnok }} {{hero infobox|boxwidth=20em | name = Ezren Ghal }} {{hero infobox|boxwidth=20em | name = Griselma }} {{hero infobox|boxwidth=20em | name = HK-206 }} {{hero infobox|boxwidth=20em | name = Imani }} {{hero infobox|boxwidth=20em | name = Kajir }} {{hero infobox|boxwidth=20em | name = Lord Knossos }} }}
You will get: (Please resize your broswer window to see how it responds to the change of width. )
[[File:QHS {{{image}}}.png|class=border-theme-box-outset-2px]]
Role - [[Heroes#{{{role}}}|{{{role}}}]]
Archetype - [[Heroes#{{{archetype}}}|{{{archetype}}}]]
[[File:QHS {{{image}}}.png|class=border-theme-box-outset-2px]]
Role - [[Heroes#{{{role}}}|{{{role}}}]]
Archetype - [[Heroes#{{{archetype}}}|{{{archetype}}}]]
[[File:QHS {{{image}}}.png|class=border-theme-box-outset-2px]]
Role - [[Heroes#{{{role}}}|{{{role}}}]]
Archetype - [[Heroes#{{{archetype}}}|{{{archetype}}}]]
[[File:QHS {{{image}}}.png|class=border-theme-box-outset-2px]]
Role - [[Heroes#{{{role}}}|{{{role}}}]]
Archetype - [[Heroes#{{{archetype}}}|{{{archetype}}}]]
[[File:QHS {{{image}}}.png|class=border-theme-box-outset-2px]]
Role - [[Heroes#{{{role}}}|{{{role}}}]]
Archetype - [[Heroes#{{{archetype}}}|{{{archetype}}}]]
[[File:QHS {{{image}}}.png|class=border-theme-box-outset-2px]]
Role - [[Heroes#{{{role}}}|{{{role}}}]]
Archetype - [[Heroes#{{{archetype}}}|{{{archetype}}}]]
[[File:QHS {{{image}}}.png|class=border-theme-box-outset-2px]]
Role - [[Heroes#{{{role}}}|{{{role}}}]]
Archetype - [[Heroes#{{{archetype}}}|{{{archetype}}}]]
[[File:QHS {{{image}}}.png|class=border-theme-box-outset-2px]]
Role - [[Heroes#{{{role}}}|{{{role}}}]]
Archetype - [[Heroes#{{{archetype}}}|{{{archetype}}}]]
Inline Flexbox
You can use inline or inlinebox as the value of unnamed parameter 1 to make the flexbox became inline.
Example:
xx{{flexstart|inline|width=45em|justify=center|css=background: #f2f2ff;}} {{hero infobox|boxwidth=20em | name = Aisling }} {{hero infobox|boxwidth=20em | name = Beckett }} {{hero infobox|boxwidth=20em | name = Charnok }} {{flexend}}yy{{flexstart|inlinebox|width=45em|justify=center|css=background: #fff2f2;}} {{hero infobox|boxwidth=20em | name = Ezren Ghal }} {{hero infobox|boxwidth=20em | name = Griselma }} {{hero infobox|boxwidth=20em | name = HK-206 }} {{flexend}}zz
It will output:
xx[[File:QHS {{{image}}}.png|class=border-theme-box-outset-2px]]
Role - [[Heroes#{{{role}}}|{{{role}}}]]
Archetype - [[Heroes#{{{archetype}}}|{{{archetype}}}]]
[[File:QHS {{{image}}}.png|class=border-theme-box-outset-2px]]
Role - [[Heroes#{{{role}}}|{{{role}}}]]
Archetype - [[Heroes#{{{archetype}}}|{{{archetype}}}]]
[[File:QHS {{{image}}}.png|class=border-theme-box-outset-2px]]
Role - [[Heroes#{{{role}}}|{{{role}}}]]
Archetype - [[Heroes#{{{archetype}}}|{{{archetype}}}]]
[[File:QHS {{{image}}}.png|class=border-theme-box-outset-2px]]
Role - [[Heroes#{{{role}}}|{{{role}}}]]
Archetype - [[Heroes#{{{archetype}}}|{{{archetype}}}]]
Contents Alignment
You can use alignitems parameter to change the way of contents alignment in crossing axis.
Example:
{{flexstart|alignitems=center|css=padding: 3em;background:#fff2f2;}} {{hero infobox|boxwidth=20em | name = Aisling }} {{hero infobox|boxwidth=20em | name = Beckett }} {{hero infobox|boxwidth=20em | name = Charnok }} {{flexend}} {{flexstart|alignitems=bottom|css=padding: 3em;background:#f2fff2;}} {{hero infobox|boxwidth=20em | name = Ezren Ghal }} {{hero infobox|boxwidth=20em | name = Griselma }} {{hero infobox|boxwidth=20em | name = HK-206 }} {{flexend}}
You will get:
[[File:QHS {{{image}}}.png|class=border-theme-box-outset-2px]]
Role - [[Heroes#{{{role}}}|{{{role}}}]]
Archetype - [[Heroes#{{{archetype}}}|{{{archetype}}}]]
[[File:QHS {{{image}}}.png|class=border-theme-box-outset-2px]]
Role - [[Heroes#{{{role}}}|{{{role}}}]]
Archetype - [[Heroes#{{{archetype}}}|{{{archetype}}}]]
[[File:QHS {{{image}}}.png|class=border-theme-box-outset-2px]]
Role - [[Heroes#{{{role}}}|{{{role}}}]]
Archetype - [[Heroes#{{{archetype}}}|{{{archetype}}}]]
[[File:QHS {{{image}}}.png|class=border-theme-box-outset-2px]]
Role - [[Heroes#{{{role}}}|{{{role}}}]]
Archetype - [[Heroes#{{{archetype}}}|{{{archetype}}}]]
Justify Contents
You can use justify parameter to control how the contents will align along the current line in flexbox.
Example:
{{flexstart|width=70em|justify=center|css=background:#fff2f2;}} {{hero infobox|boxwidth=20em | name = Aisling }} {{hero infobox|boxwidth=20em | name = Beckett }} {{hero infobox|boxwidth=20em | name = Charnok }} {{flexend}} {{flexstart|width=70em|justify=justified|css=background:#f2fff2;}} {{hero infobox|boxwidth=20em | name = Ezren Ghal }} {{hero infobox|boxwidth=20em | name = Griselma }} {{hero infobox|boxwidth=20em | name = HK-206 }} {{flexend}} {{flexstart|width=70em|justify=space-around|css=background:#f2f2ff;}} {{hero infobox|boxwidth=20em | name = Imani }} {{hero infobox|boxwidth=20em | name = Kajir }} {{hero infobox|boxwidth=20em | name = Lord Knossos }} {{flexend}} {{flexsart|width=70em|justify=right|css=background:#f2f2f2;}} {{hero infobox|boxwidth=20em | name = Aisling }} {{hero infobox|boxwidth=20em | name = Beckett }} {{hero infobox|boxwidth=20em | name = Charnok }} {{flexend}}
You will get:
[[File:QHS {{{image}}}.png|class=border-theme-box-outset-2px]]
Role - [[Heroes#{{{role}}}|{{{role}}}]]
Archetype - [[Heroes#{{{archetype}}}|{{{archetype}}}]]
[[File:QHS {{{image}}}.png|class=border-theme-box-outset-2px]]
Role - [[Heroes#{{{role}}}|{{{role}}}]]
Archetype - [[Heroes#{{{archetype}}}|{{{archetype}}}]]
[[File:QHS {{{image}}}.png|class=border-theme-box-outset-2px]]
Role - [[Heroes#{{{role}}}|{{{role}}}]]
Archetype - [[Heroes#{{{archetype}}}|{{{archetype}}}]]
[[File:QHS {{{image}}}.png|class=border-theme-box-outset-2px]]
Role - [[Heroes#{{{role}}}|{{{role}}}]]
Archetype - [[Heroes#{{{archetype}}}|{{{archetype}}}]]
[[File:QHS {{{image}}}.png|class=border-theme-box-outset-2px]]
Role - [[Heroes#{{{role}}}|{{{role}}}]]
Archetype - [[Heroes#{{{archetype}}}|{{{archetype}}}]]
[[File:QHS {{{image}}}.png|class=border-theme-box-outset-2px]]
Role - [[Heroes#{{{role}}}|{{{role}}}]]
Archetype - [[Heroes#{{{archetype}}}|{{{archetype}}}]]
[[File:QHS {{{image}}}.png|class=border-theme-box-outset-2px]]
Role - [[Heroes#{{{role}}}|{{{role}}}]]
Archetype - [[Heroes#{{{archetype}}}|{{{archetype}}}]]
[[File:QHS {{{image}}}.png|class=border-theme-box-outset-2px]]
Role - [[Heroes#{{{role}}}|{{{role}}}]]
Archetype - [[Heroes#{{{archetype}}}|{{{archetype}}}]]
Take control on Flexitem
If you need control the css style of flex item inside, you can simply apple css on it(or on a wrap html element), like:
{{flexstart}} <div style="order:2">{{hero infobox|boxwidth=20em | name = Aisling }}</div> <div style="order:3">{{hero infobox|boxwidth=20em | name = Beckett }}</div> <div style="order:1">{{hero infobox|boxwidth=20em | name = Charnok }}</div> {{flexend}}
But use {{flexstart}}
and {{flexend}}
and/or {{flexitem}}
can get the best browser compatibility, also more convenient.
Their usage is very similar to flexbox:
example:
{{flexstart}} {{flexstart|item|order=2}} {{hero infobox|boxwidth=20em | name = Aisling }} {{flexend}} {{flexstart|item|order=3}} {{hero infobox|boxwidth=20em | name = Beckett }} {{flexend}} {{flexstart|item|order=1}} {{hero infobox|boxwidth=20em | name = Charnok }} {{flexend}} {{flexend}}
or
{{flexstart}} {{flexitem|order=2| {{hero infobox|boxwidth=20em | name = Aisling }} }} {{flexitem|order=3| {{hero infobox|boxwidth=20em | name = Beckett }} }} {{flexitem|order=1| {{hero infobox|boxwidth=20em | name = Charnok }} }} {{flexend}}
You will get: