Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:create:table-layout [11.04.2014 14:02] – Verweis auf Dropdown-Beispiel admin
+++ de:create:table-layout [28.08.2024 14:23] (aktuell) – [Variante A: Flexbox] admin
@@ Zeile 15: / Zeile 15: @@
 Eine Schritt-für-Schritt-Beschreibung zum obigen Beispiel lesen Sie unter [[table-layout-dropdowns|Dropdowns nebeneinander platzieren]].
-===== Grundlage: Tabellen =====
+===== Variante A: Flexbox =====
+Eine Flexbox-Konstruktion besteht aus einem Flexbox-Container ''%%<div style="display: flex">%%'' und darin enthalten Elemente, die nebeneinander angeordnet werden.
+Der Unterschied zu Tabellen (unten) besteht darin, dass man den Elementen einer Flexbox erlauben kann, dass sie auf mehrere Zeilen umbrechen, wenn der Platz nicht ausreicht. Dadurch können Elemente auf dem PC-Bildschirm nebeneinander und auf dem Smartphone untereinander angeordnet werden.
+Zum Nachlesen: [[https://css-tricks.com/snippets/css/a-guide-to-flexbox/|CSS Tricks: CSS Flexbox Layout Guide]]
+Wenn Sie zwei Fragen nebeneinander platzieren möchten, benötigen Sie auf der Fragebogen-Seite (**Fragebogen zusammenstellen**) "HTML-Code" (nicht zu verwechseln mit "PHP-Code"), welcher gewissermaßen einen Rahmen um die Fragen bildet. Das kann wie folgt aussehen. Der Teil zwischen ''%%<!--%%'' und ''%%-->%%'' ist ein Kommentar und dient nur zur Orientierung, für die Funktion sind diese Zeilen unerheblich.
+<code html>
+<!-- Flexbox-Container -->
+<div style="display: flex; flex-wrap: wrap; gap: 0 50px;">
+<!-- Anfang linkes Element -->
+<div style="flex: 1 1 400px; min-width: 320px;">
+</code>
+{{:de:create:fig.question.de.png?nolink|Frage zwischen dem HTML-Code}}
+<code html>
+<!-- Abschluss linkes Element -->
+</div>
+<!-- Anfang rechtes Element -->
+<div style="flex: 1 1 400px; min-width: 320px;">
+</code>
+{{:de:create:fig.question.de.png?nolink|Frage zwischen dem HTML-Code}}
+<code html>
+<!-- Abschluss rechtes Element -->
+</div>
+<!-- Abschluss Flexbox -->
+</div>
+</code>
+Das Breitenverhältnis der beiden Spalten ergibt sich aus der Angabe ''flex: 1 1 400px'', die bei beiden Elementen steht. Würde hier beim zweiten Element eine größere Zahl stehen, z.B. ''flex: 1 1 600px'', so wäre die rechte Spalte breiter. Die beiden Einser (''1 1'') geben lediglich an, dass die Element ausgehend von der Basisbreite (400 Pixel in diesem Fall) sowohl größer als auch kleiner werden dürfen.
+Die Angabe ''gap: 0 50px'' im Container gibt an, dass zwischen den Elementen ein horizontaler Abstand von 50 Pixels bleiben soll. Falls die Elemente aber untereinander dargestellt werden (siehe unten), soll kein Abstand eingefügt werden.
+Die Angabe ''min-width: 320px'' gibt an, dass jedes Element für sich nicht schmaler als 320 Pixel dargestellt werden darf. Falls der Platz nicht für beide Elemente nebeneinder plus Abstand (320 + 50 + 320 = 690 Pixel) nicht ausreicht (zum Beispiel auf dem Smartphone, weil das Tablet hochkant gehalten wird, oder weil das Browserfenster einfach nicht den ganzen Bildschirm bekommt), dann werden die Elemente untereinander dargestellt (''flex-wrap: wrap'' erlaubt das Umbrechen). Dort nehmen sie dann aber wieder die komplette verfügbare Breite ein.
+Anstatt von Fragen können auch andere Element zwischen den HTML-Code-Elementen stehen, zum Beispiel Bilder oder der [[:de:create:media|HTML-Code für Mediendateien]].
+===== Variante B: Tabellen =====
+**Hinweis:** Tabellen sind besser steuerbar, aber weniger flexibel. Falls Sie erwarten, dass Personen den Fragebogen via Smartphone ausfüllen, sollten Sie keine Tabellen verwenden.
 Die Grundlage für eine mehrspaltige Anordnung sind HTML-Tabellen. Eine einfache HTML-Tabelle sieht aus wie folgt. Darunter sehen Sie den HTML-Code für eine Tabelle mit 3 gleich breiten Spalten und 2 Zeilen.