Vorlage:2Spalten

Beschreibung

Die Vorlage erzeugt 2 per Flexbox nebeneinander gesetzte Spalten. Die Standardbreite für jede Spalte beträgt 15em, hinzu kommt eine Lücke von 0.75em. Dies kann durch Parameter überschrieben werden. Ist mehr Platz vorhanden, als benötigt wird, werden die Spalten verbreitert und füllen den freien Platz auf. Dabei gilt:

• Ist für keine Spalte eine Breite angegeben, wird der Platz gleichmäßig verteilt
• Ist nur für eine Spalte eine Breite angegeben, bekommt die Spalte den freien Platz zugeteilt, für die keine Breite angegeben wurde (wegen flex-grow:99 für Spalten ohne Breitenangabe)
• Ist für beide Spalten eine Breite angegeben, wird der Platz an Hand der Werte der grow-Parameter verteilt

Ist nicht genug Platz im Inhaltsbereich, um die Spalten nebeneinander darstellen zu können, werden sie untereinander gesetzt und nehmen beide die volle Inhaltsbreite ein.

Parameter

Positionsparameter 1

Inhalt für Spalte 1

Positionsparameter 2

Inhalt für Spalte 2

width1

(optional) Breite für Spalte 1. Default ist 15em.

grow1

(optional, nur zusammen mit width1) Wachstumsfaktor (flex-grow) für Spalte 1. Default ist 1, wenn width1 angegeben wird und 99, wenn width1 nicht angegeben wird.

width2

(optional) Breite für Spalte 2. Default ist 15em.

grow2

(optional, nur zusammen mit width2) Wachstumsfaktor (flex-grow) für Spalte 2. Default wie bei grow1

gap

(optional) Breite der Lücke, exakt so wie man es mit der CSS-Eigenschaft gap machen würde. Default ist gap=0.75em.

Wenn die Spalteninhalte ein Gleichheitszeichen enthalten, wird der Mediawiki-Parser davon gestört und Sie müssen es maskieren.

Anwendung

Keine expliziten Breitenangaben

Wenn Du keine weiteren Angaben machst, erhalten beide Spalten eine Standardbreite von 15em und einen Abstand von 0.75em.

{{2Spalten
|Spalte 1, mit automatischer Breite. Dies ist noch etwas mehr Text, damit man die Spaltenaufteilung besser erkennen kann. Dieser Absatz wird von Mediawiki als NICHT Paragraph formatiert, weil der Text direkt hinter dem Parametertrenner beginnt
* Listen 
* sind 
* ebenfalls
* möglich
|
* Spalte 2, mit automatischer Breite, und einem Listenpunkt gleich zu Beginn. Damit der Stern erkannt wird, MUSS der Listenpunkt vorn in der Zeile erkannt werden.

Dies ist noch etwas mehr Text, damit man die Spaltenaufteilung besser erkennen kann
}}

ergibt

Spalte 1, mit automatischer Breite. Dies ist noch etwas mehr Text, damit man die Spaltenaufteilung besser erkennen kann.

• Listen
• sind
• ebenfalls
• möglich

• Spalte 2, mit automatischer Breite, und einem Listenpunkt gleich zu Beginn. Er muss auf eine eigene Zeile gesetzt werden, um vom Parser erkannt zu werden.

Dies ist noch etwas mehr Text, damit man die Spaltenaufteilung besser erkennen kann

Der rote Rand ist die Folge der zusätzlich gesetzten debug-Klasse

Angeben von zusätzlichen CSS Klassen

Der Parameter class kann optional angegeben werden, um dem Flexbox-Element weitere Klassen hinzuzufügen. Der Selfhtml-Skin stellt die Klasse debug zur Verfügung, um die Spalten mit einem Outline zu versehen und damit zu visualisieren. Den Effekt sehen Sie in allen Beispielen dieser Anleitung.

Mit Breitenangabe für eine Spalte

{{2Spalten
|width1=10em|Inhalt Spalte 1, ihre Breite beträgt 10em
|Inhalt Spalte 2}}

ergibt

Inhalt Spalte 1, ihre Breite beträgt 10em

Inhalt Spalte 2

{{2Spalten
|Inhalt Spalte 1
|width2=12em|Inhalt Spalte 2, ihre Breite beträgt 12em}}

ergibt

Inhalt Spalte 1

Inhalt Spalte 2, ihre Breite beträgt 12em

Mit Breitenangaben für beide Spalten

{{2Spalten
|width1=12em|Inhalt Spalte 1 12em breit
|width2=23em|Inhalt Spalte 2 23em breit}}

ergibt

Inhalt Spalte 1 12em breit

Inhalt Spalte 2 23em breit

Beachten Sie: Die Spaltenbreiten sind auf 100% des Inhaltsbereichs limitiert, und wenn Sie die Breiten zu groß angeben, werden die Spalten einfach untereinander gesetzt.

Festlegen der Lückenbreite

Der Parameter gap ermöglicht die Angabe der Lückenbreite zwischen den Spalten. Es sind die gleichen Angaben wie bei der CSS-Eigenschaft gap möglich!

{{2Spalten|gap=2em
|width1=12em|Inhalt Spalte 1 12em breit
|width2=23em|Inhalt Spalte 2 23em breit}}

ergibt

Inhalt Spalte 1 12em breit

Inhalt Spalte 2 23em breit