Vorlage:Nowrap

Dokumentation Die folgende Dokumentation stammt von der Seite Vorlage:Flexbox/Dokumentation. (bearbeiten | Versionsgeschichte)

[aktualisieren]

Siehe auch die englische Vorlagenseite: Template:Flexbox. Sie enthält möglicherweise umfassendere oder aktuellere Informationen.

	Diese Seite ist nicht oder unvollständig übersetzt.
	Hilf mit, indem du den Text übersetzt und anschließend diesen Hinweis entfernst. Dies entfernt diese Seite auch aus der Liste von Seiten mit unzureichender Übersetzung.

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.

Verwendung

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, 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 {{tl|flexstart}} and {{tl|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 of inline.Default value is box.
• 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.
• Parameters for flexbox:
  • wrap: Controls whether the flexbox is single-line or multi-line. It actually set css flex-wrap porperty. Can be yes / no or any valid value for css flex-wrap property. yes is alias of css value wrap, and no is alias of nowrap . Default value is wrap.
  • 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 be left / center / right / justified or other valid value for css justify-content property. left is alias of css value flex-start, right is alias of flex-end, and justified is alias of space-between. Default value is left.
  • alignitems: How content items will vertical aligned in current line of flexbox. It actually set css align-items porperty. Can be top / middle / bottom or other valid value for css align-items property. top is alias of css value flex-start, middle is alias of center, and bottom is alias of flex-end. Default value is stretch.
  • 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 value flex-start, bottom is alias of flex-end, and justified is alias of space-between. Default value is top.
• 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 use top/middle/bottom as its value, top is alias of css value flex-start, middle is alias of center, and bottom is alias of flex-end. Default value is stretch.

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}}
 {{npc infobox|boxwidth=20em | name = Zombie }}
 {{npc infobox|boxwidth=20em | name = Worm }}
 {{npc infobox|boxwidth=20em | name = Bunny }}
 {{npc infobox|boxwidth=20em | name = Antlion}}
 {{npc infobox|boxwidth=20em | name = Crimera }}
 {{npc infobox|boxwidth=20em | name = Pinky }}
 {{npc infobox|boxwidth=20em | name = Hornet }}
 {{npc infobox|boxwidth=20em | name = Harpy }}
 {{npc infobox|boxwidth=20em | name = Vulture}}
{{flexend}}

or

{{flexbox|
 {{npc infobox|boxwidth=20em | name = Zombie }}
 {{npc infobox|boxwidth=20em | name = Worm }}
 {{npc infobox|boxwidth=20em | name = Bunny }}
 {{npc infobox|boxwidth=20em | name = Antlion}}
 {{npc infobox|boxwidth=20em | name = Crimera }}
 {{npc infobox|boxwidth=20em | name = Pinky }}
 {{npc infobox|boxwidth=20em | name = Hornet }}
 {{npc infobox|boxwidth=20em | name = Harpy }}
 {{npc infobox|boxwidth=20em | name = Vulture}}
}}

You will get: (Please resize your broswer window to see how it responds to the change of width. )

Zombie

 Klassisch

 Experte

 Meister

Eigenschaften

Typ	Gegner

Geräusche

Wurm

 Klassisch

 Experte

 Meister

Eigenschaften

Typ	Gegner

Geräusche

Hase

 Klassisch

 Experte

 Meister

Eigenschaften

Typ	Gegner

Geräusche

Ameisenlöwe

 Klassisch

 Experte

 Meister

Eigenschaften

Typ	Gegner

Geräusche

Purmere

 Klassisch

 Experte

 Meister

Eigenschaften

Typ	Gegner

Geräusche

Pinky

 Klassisch

 Experte

 Meister

Eigenschaften

Typ	Gegner

Geräusche

Hornisse

 Klassisch

 Experte

 Meister

Eigenschaften

Typ	Gegner

Geräusche

Harpyie

 Klassisch

 Experte

 Meister

Eigenschaften

Typ	Gegner

Geräusche

Geier

 Klassisch

 Experte

 Meister

Eigenschaften

Typ	Gegner

Geräusche

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;}}
 {{npc infobox|boxwidth=20em | name = Zombie }}
 {{npc infobox|boxwidth=20em | name = Worm }}
 {{npc infobox|boxwidth=20em | name = Bunny }}
{{flexend}}yy{{flexstart|inlinebox|width=45em|justify=center|css=background: #fff2f2;}}
 {{npc infobox|boxwidth=20em | name = Antlion}}
 {{npc infobox|boxwidth=20em | name = Crimera }}
 {{npc infobox|boxwidth=20em | name = Pinky }}
{{flexend}}zz

It will output:

xx

Zombie

 Klassisch

 Experte

 Meister

Eigenschaften

Typ	Gegner

Geräusche

Wurm

 Klassisch

 Experte

 Meister

Eigenschaften

Typ	Gegner

Geräusche

Hase

 Klassisch

 Experte

 Meister

Eigenschaften

Typ	Gegner

Geräusche

yy

Ameisenlöwe

 Klassisch

 Experte

 Meister

Eigenschaften

Typ	Gegner

Geräusche

Purmere

 Klassisch

 Experte

 Meister

Eigenschaften

Typ	Gegner

Geräusche

Pinky

 Klassisch

 Experte

 Meister

Eigenschaften

Typ	Gegner

Geräusche

zz

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;}}
 {{npc infobox|boxwidth=20em | name = Zombie }}
 {{npc infobox|boxwidth=20em | name = Worm }}
 {{npc infobox|boxwidth=20em | name = Bunny }}
{{flexend}}
{{flexstart|alignitems=bottom|css=padding: 3em;background:#f2fff2;}}
 {{npc infobox|boxwidth=20em | name = Antlion}}
 {{npc infobox|boxwidth=20em | name = Crimera }}
 {{npc infobox|boxwidth=20em | name = Pinky }}
{{flexend}}

You will get:

Zombie

 Klassisch

 Experte

 Meister

Eigenschaften

Typ	Gegner

Geräusche

Wurm

 Klassisch

 Experte

 Meister

Eigenschaften

Typ	Gegner

Geräusche

Hase

 Klassisch

 Experte

 Meister

Eigenschaften

Typ	Gegner

Geräusche

Ameisenlöwe

 Klassisch

 Experte

 Meister

Eigenschaften

Typ	Gegner

Geräusche

Purmere

 Klassisch

 Experte

 Meister

Eigenschaften

Typ	Gegner

Geräusche

Pinky

 Klassisch

 Experte

 Meister

Eigenschaften

Typ	Gegner

Geräusche

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;}}
 {{npc infobox|boxwidth=20em | name = Zombie }}
 {{npc infobox|boxwidth=20em | name = Worm }}
 {{npc infobox|boxwidth=20em | name = Bunny }}
{{flexend}}
{{flexstart|width=70em|justify=justified|css=background:#f2fff2;}}
 {{npc infobox|boxwidth=20em | name = Antlion}}
 {{npc infobox|boxwidth=20em | name = Crimera }}
 {{npc infobox|boxwidth=20em | name = Pinky }}
{{flexend}}
{{flexstart|width=70em|justify=space-around|css=background:#f2f2ff;}}
 {{npc infobox|boxwidth=20em | name = Hornet }}
 {{npc infobox|boxwidth=20em | name = Harpy }}
 {{npc infobox|boxwidth=20em | name = Vulture}}
{{flexend}}
{{flexsart|width=70em|justify=right|css=background:#f2f2f2;}}
 {{npc infobox|boxwidth=20em | name = Zombie }}
 {{npc infobox|boxwidth=20em | name = Worm }}
 {{npc infobox|boxwidth=20em | name = Bunny }}
{{flexend}}

You will get:

Zombie

 Klassisch

 Experte

 Meister

Eigenschaften

Typ	Gegner

Geräusche

Wurm

 Klassisch

 Experte

 Meister

Eigenschaften

Typ	Gegner

Geräusche

Hase

 Klassisch

 Experte

 Meister

Eigenschaften

Typ	Gegner

Geräusche

Ameisenlöwe

 Klassisch

 Experte

 Meister

Eigenschaften

Typ	Gegner

Geräusche

Purmere

 Klassisch

 Experte

 Meister

Eigenschaften

Typ	Gegner

Geräusche

Pinky

 Klassisch

 Experte

 Meister

Eigenschaften

Typ	Gegner

Geräusche

Hornisse

 Klassisch

 Experte

 Meister

Eigenschaften

Typ	Gegner

Geräusche

Harpyie

 Klassisch

 Experte

 Meister

Eigenschaften

Typ	Gegner

Geräusche

Geier

 Klassisch

 Experte

 Meister

Eigenschaften

Typ	Gegner

Geräusche

Zombie

 Klassisch

 Experte

 Meister

Eigenschaften

Typ	Gegner

Geräusche

Wurm

 Klassisch

 Experte

 Meister

Eigenschaften

Typ	Gegner

Geräusche

Hase

 Klassisch

 Experte

 Meister

Eigenschaften

Typ	Gegner

Geräusche

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">{{npc infobox|boxwidth=20em | name = Zombie }}</div>
 <div style="order:3">{{npc infobox|boxwidth=20em | name = Worm }}</div>
 <div style="order:1">{{npc infobox|boxwidth=20em | name = Bunny }}</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}} {{npc infobox|boxwidth=20em | name = Zombie }} {{flexend}}
 {{flexstart|item|order=3}} {{npc infobox|boxwidth=20em | name = Worm }} {{flexend}}
 {{flexstart|item|order=1}} {{npc infobox|boxwidth=20em | name = Bunny }} {{flexend}}
{{flexend}}

or

{{flexstart}}
 {{flexitem|order=2| {{npc infobox|boxwidth=20em | name = Zombie }} }}
 {{flexitem|order=3| {{npc infobox|boxwidth=20em | name = Worm }} }}
 {{flexitem|order=1| {{npc infobox|boxwidth=20em | name = Bunny }} }}
{{flexend}}

You will get:

Zombie

 Klassisch

 Experte

 Meister

Eigenschaften

Typ	Gegner

Geräusche

Wurm

 Klassisch

 Experte

 Meister

Eigenschaften

Typ	Gegner

Geräusche

Hase

 Klassisch

 Experte

 Meister

Eigenschaften

Typ	Gegner

Geräusche