Difference between revisions of "Flex"
From Gulf of Fallen Stars
| (3 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<noinclude> | <noinclude> | ||
=== Parameters === | === Parameters === | ||
| − | '''type(required):''' begin / div / end | + | '''type(required):''' begin / div / end<br> |
| + | ''Alternatively:'' begincontainer / begincard / (div) / endcard / endcontainer<br> | ||
| + | ''Alternative to div:'' nl (newline: like a div, but forces a new line at this point) | ||
'''cols(default 3):''' number of columns on widest screen. If set to 0, width/number columns is not defined. | '''cols(default 3):''' number of columns on widest screen. If set to 0, width/number columns is not defined. | ||
| Line 17: | Line 19: | ||
-->{{#ifeq: {{#var:cols}}|0|{{#vardefine:width|auto}}{{#vardefine:minwidth|0}}}}<!-- | -->{{#ifeq: {{#var:cols}}|0|{{#vardefine:width|auto}}{{#vardefine:minwidth|0}}}}<!-- | ||
-->{{#ifeq: {{#var:cols}}|1|{{#vardefine:width|100%}}{{#vardefine:minwidth|100%}}}}<!-- | -->{{#ifeq: {{#var:cols}}|1|{{#vardefine:width|100%}}{{#vardefine:minwidth|100%}}}}<!-- | ||
| − | -->{{#ifeq: {{#var:cols}}|2|{{#vardefine:width| | + | -->{{#ifeq: {{#var:cols}}|2|{{#vardefine:width|50%}}{{#vardefine:minwidth|330px}}}}<!-- |
| − | -->{{#ifeq: {{#var:cols}}|3|{{#vardefine:width| | + | -->{{#ifeq: {{#var:cols}}|3|{{#vardefine:width|33%}}{{#vardefine:minwidth|330px}}}}<!-- |
| − | -->{{#ifeq: {{#var:cols}}|4|{{#vardefine:width| | + | -->{{#ifeq: {{#var:cols}}|4|{{#vardefine:width|25%}}{{#vardefine:minwidth|250px}}}}<!-- |
| − | -->{{#ifeq: {{#var:cols}}|5|{{#vardefine:width| | + | -->{{#ifeq: {{#var:cols}}|5|{{#vardefine:width|20%}}{{#vardefine:minwidth|200px}}}}<!-- |
-->{{#ifeq: {{#var:cols}}|6|{{#vardefine:width|16%}}{{#vardefine:minwidth|160px}}}}<!-- | -->{{#ifeq: {{#var:cols}}|6|{{#vardefine:width|16%}}{{#vardefine:minwidth|160px}}}}<!-- | ||
| Line 36: | Line 38: | ||
-->{{#if:{{{nomargin|}}}|{{#vardefine:margin|margin:0px;}}{{#vardefine:padding|padding:0px;}}|}}<!-- | -->{{#if:{{{nomargin|}}}|{{#vardefine:margin|margin:0px;}}{{#vardefine:padding|padding:0px;}}|}}<!-- | ||
| − | -->{{#vardefine:startdivs|<div style="display:flex; align-items:stretch; flex-basis:{{#var:width}};min-width:{{#var:minwidth}};"><div style="flex-basis:100%;{{#var:boxstyle}}{{#var:margin}}{{#var:padding}}{{#var:background}}{{#var:textstyle|}}">}}<!-- | + | -->{{#vardefine:startcontainer|<div style="display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:stretch;">}}<!-- |
| + | -->{{#vardefine:startdivs|<div style="display:flex; align-items:stretch; flex-basis:{{#var:width}};min-width:{{#var:minwidth}};"><div style="flex-basis:100%;overflow-y: auto;{{#var:boxstyle}}{{#var:margin}}{{#var:padding}}{{#var:background}}{{#var:textstyle|}}">}}<!-- | ||
-->{{#vardefine:enddivs|</div></div>}}<!-- | -->{{#vardefine:enddivs|</div></div>}}<!-- | ||
| − | -->{{#ifeq:{{{type}}}|begin|< | + | -->{{#ifeq:{{{type}}}|begin|{{#var:startcontainer}}{{#var:startdivs}}}}<!-- |
| + | -->{{#ifeq:{{{type}}}|begincard|{{#var:startdivs}}}}<!-- | ||
| + | -->{{#ifeq:{{{type}}}|begincontainer|{{#var:startcontainer}}}}<!-- | ||
-->{{#ifeq:{{{type}}}|div|{{#var:enddivs}}{{#var:startdivs}}|}}<!-- | -->{{#ifeq:{{{type}}}|div|{{#var:enddivs}}{{#var:startdivs}}|}}<!-- | ||
-->{{#ifeq:{{{type}}}|nl|{{#var:enddivs}} | -->{{#ifeq:{{{type}}}|nl|{{#var:enddivs}} | ||
<wbr> | <wbr> | ||
{{#var:startdivs}}|}}<!-- | {{#var:startdivs}}|}}<!-- | ||
| − | -->{{#ifeq:{{{type}}}|end|{{#var:enddivs}}</div>}} | + | -->{{#ifeq:{{{type}}}|end|{{#var:enddivs}}</div>}}<!-- |
| + | -->{{#ifeq:{{{type}}}|endcard|{{#var:enddivs}}}}<!-- | ||
| + | -->{{#ifeq:{{{type}}}|endcontainer|</div>}} | ||
Latest revision as of 00:29, 6 April 2020
Parameters
type(required): begin / div / end
Alternatively: begincontainer / begincard / (div) / endcard / endcontainer
Alternative to div: nl (newline: like a div, but forces a new line at this point)
cols(default 3): number of columns on widest screen. If set to 0, width/number columns is not defined.
border(default false): whether the box should have a border
background(default transparent): the background of the grid cell. Defaults to white if border is true.
center(default false): center the text in the div
nomargin(default false): Overrides all margins and padding to 0