http://wiki.fhem.de/w/index.php?action=history&feed=atom&title=FTUI_Layout_Flex
FTUI Layout Flex - Versionsgeschichte
2026-05-08T05:39:29Z
Versionsgeschichte dieser Seite in FHEMWiki
MediaWiki 1.43.6
http://wiki.fhem.de/w/index.php?title=FTUI_Layout_Flex&diff=39450&oldid=prev
Pahenning am 2. August 2024 um 14:58 Uhr
2024-08-02T14:58:56Z
<p></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="de">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Nächstältere Version</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Version vom 2. August 2024, 16:58 Uhr</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1">Zeile 1:</td>
<td colspan="2" class="diff-lineno">Zeile 1:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><div style="float: right;">__TOC__</div></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><div style="float: right;">__TOC__</div></div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Das [[FTUI Layout Flex|Flex-Layout]] (bzw. hbox-/vbox-Layout) ist ein responsives Layout für [[FHEM Tablet UI]], welches sich automatisch an die verfügbare Displaygröße anpasst. Mit diesem Layout werden einzelne Boxen definiert, die ihre Position und Größe je nach verfügbarem Platz vorhersagbar ändern.</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Das [[FTUI Layout Flex|Flex-Layout]] (bzw. hbox-/vbox-Layout) ist ein responsives Layout für [[FHEM Tablet UI <ins style="font-weight: bold; text-decoration: none;">V2</ins>]], welches sich automatisch an die verfügbare Displaygröße anpasst. Mit diesem Layout werden einzelne Boxen definiert, die ihre Position und Größe je nach verfügbarem Platz vorhersagbar ändern.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Es basiert auf der [https://developer.mozilla.org/de/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes Flexbox-Technologie] von CSS.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Es basiert auf der [https://developer.mozilla.org/de/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes Flexbox-Technologie] von CSS.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l325">Zeile 325:</td>
<td colspan="2" class="diff-lineno">Zeile 325:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>*[https://developer.mozilla.org/de/docs/Web/CSS/CSS_Flexible_Box_Layout Mozilla Developer Network - Flexbox]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>*[https://developer.mozilla.org/de/docs/Web/CSS/CSS_Flexible_Box_Layout Mozilla Developer Network - Flexbox]</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>[[Kategorie:FHEM Tablet UI|Layout Flex]]</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>[[Kategorie:FHEM Tablet UI <ins style="font-weight: bold; text-decoration: none;">V2</ins>|Layout Flex]]</div></td></tr>
<!-- diff cache key c1fhemwiki:diff:1.41:old-24761:rev-39450:php=table -->
</table>
Pahenning
http://wiki.fhem.de/w/index.php?title=FTUI_Layout_Flex&diff=24761&oldid=prev
Baumbuwe: catsort
2018-01-26T14:17:15Z
<p>catsort</p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="de">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Nächstältere Version</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Version vom 26. Januar 2018, 16:17 Uhr</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l325">Zeile 325:</td>
<td colspan="2" class="diff-lineno">Zeile 325:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>*[https://developer.mozilla.org/de/docs/Web/CSS/CSS_Flexible_Box_Layout Mozilla Developer Network - Flexbox]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>*[https://developer.mozilla.org/de/docs/Web/CSS/CSS_Flexible_Box_Layout Mozilla Developer Network - Flexbox]</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>[[Kategorie:FHEM Tablet UI]]</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>[[Kategorie:FHEM Tablet UI<ins style="font-weight: bold; text-decoration: none;">|Layout Flex</ins>]]</div></td></tr>
<!-- diff cache key c1fhemwiki:diff:1.41:old-21896:rev-24761:php=table -->
</table>
Baumbuwe
http://wiki.fhem.de/w/index.php?title=FTUI_Layout_Flex&diff=21896&oldid=prev
Markusbloch: Anpassung von <source>-Tags nach <syntaxhighlight>
2017-07-26T17:57:58Z
<p>Anpassung von <source>-Tags nach <syntaxhighlight></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="de">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Nächstältere Version</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Version vom 26. Juli 2017, 19:57 Uhr</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l53">Zeile 53:</td>
<td colspan="2" class="diff-lineno">Zeile 53:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></ul></div></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></ul></div></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><<del style="font-weight: bold; text-decoration: none;">source </del>lang="html"></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><<ins style="font-weight: bold; text-decoration: none;">syntaxhighlight </ins>lang="html"></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><div class="vbox bg-red"></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><div class="vbox bg-red"></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <div class="hbox bg-ligthblue"></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <div class="hbox bg-ligthblue"></div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l80">Zeile 80:</td>
<td colspan="2" class="diff-lineno">Zeile 80:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> </div></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> </div></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></div></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></div></div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div></<del style="font-weight: bold; text-decoration: none;">source</del>></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></<ins style="font-weight: bold; text-decoration: none;">syntaxhighlight</ins>></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==<span id="example2"></span>Verschiedene horizontale Größen==</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==<span id="example2"></span>Verschiedene horizontale Größen==</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l98">Zeile 98:</td>
<td colspan="2" class="diff-lineno">Zeile 98:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></ul></div></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></ul></div></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><<del style="font-weight: bold; text-decoration: none;">source </del>lang="html"></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><<ins style="font-weight: bold; text-decoration: none;">syntaxhighlight </ins>lang="html"></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><div class="vbox bg-red"></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><div class="vbox bg-red"></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <div class="hbox items-top bg-ligthblue"></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <div class="hbox items-top bg-ligthblue"></div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l125">Zeile 125:</td>
<td colspan="2" class="diff-lineno">Zeile 125:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> </div></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> </div></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></div></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></div></div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div></<del style="font-weight: bold; text-decoration: none;">source</del>></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></<ins style="font-weight: bold; text-decoration: none;">syntaxhighlight</ins>></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==<span id="example3"></span>Vertikale Flexbox==</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==<span id="example3"></span>Vertikale Flexbox==</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l132">Zeile 132:</td>
<td colspan="2" class="diff-lineno">Zeile 132:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Datei:FTUI_Layout_Flex_03.png|thumb|none|x400px]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Datei:FTUI_Layout_Flex_03.png|thumb|none|x400px]]</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><<del style="font-weight: bold; text-decoration: none;">source </del>lang="html"></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><<ins style="font-weight: bold; text-decoration: none;">syntaxhighlight </ins>lang="html"></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><div class="hbox bg-red"></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><div class="hbox bg-red"></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <div class="vbox bg-ligthblue"></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <div class="vbox bg-ligthblue"></div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l159">Zeile 159:</td>
<td colspan="2" class="diff-lineno">Zeile 159:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> </div></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> </div></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></div></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></div></div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div></<del style="font-weight: bold; text-decoration: none;">source</del>></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></<ins style="font-weight: bold; text-decoration: none;">syntaxhighlight</ins>></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==<span id="example4"></span>Verschiedene vertikale Größen==</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==<span id="example4"></span>Verschiedene vertikale Größen==</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Datei:FTUI_Layout_Flex_04.png|thumb|none|x400px]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Datei:FTUI_Layout_Flex_04.png|thumb|none|x400px]]</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><<del style="font-weight: bold; text-decoration: none;">source </del>lang="html"></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><<ins style="font-weight: bold; text-decoration: none;">syntaxhighlight </ins>lang="html"></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><div class="hbox bg-red"></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><div class="hbox bg-red"></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <div class="vbox bg-ligthblue"></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <div class="vbox bg-ligthblue"></div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l190">Zeile 190:</td>
<td colspan="2" class="diff-lineno">Zeile 190:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> </div></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> </div></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></div></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></div></div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div></<del style="font-weight: bold; text-decoration: none;">source</del>></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></<ins style="font-weight: bold; text-decoration: none;">syntaxhighlight</ins>></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==<span id="example5"></span>Unterschiedliche Anzahl an Kacheln==</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==<span id="example5"></span>Unterschiedliche Anzahl an Kacheln==</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l197">Zeile 197:</td>
<td colspan="2" class="diff-lineno">Zeile 197:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Datei:FTUI_Layout_Flex_05.png|thumb|none|x400px]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Datei:FTUI_Layout_Flex_05.png|thumb|none|x400px]]</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><<del style="font-weight: bold; text-decoration: none;">source </del>lang="html"></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><<ins style="font-weight: bold; text-decoration: none;">syntaxhighlight </ins>lang="html"></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><div class="hbox bg-red"></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><div class="hbox bg-red"></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <div class="vbox bg-ligthblue"></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <div class="vbox bg-ligthblue"></div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l218">Zeile 218:</td>
<td colspan="2" class="diff-lineno">Zeile 218:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> </div></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> </div></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></div></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></div></div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div></<del style="font-weight: bold; text-decoration: none;">source</del>></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></<ins style="font-weight: bold; text-decoration: none;">syntaxhighlight</ins>></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==<span id="example6"></span>Kombination von hbox und vbox==</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==<span id="example6"></span>Kombination von hbox und vbox==</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l227">Zeile 227:</td>
<td colspan="2" class="diff-lineno">Zeile 227:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Datei:FTUI_Layout_Flex_06.png|thumb|none|x400px]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Datei:FTUI_Layout_Flex_06.png|thumb|none|x400px]]</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><<del style="font-weight: bold; text-decoration: none;">source </del>lang="html"></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><<ins style="font-weight: bold; text-decoration: none;">syntaxhighlight </ins>lang="html"></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><div class="hbox bg-red"></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><div class="hbox bg-red"></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <div class="vbox grow-0 bg-ligthblue"></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <div class="vbox grow-0 bg-ligthblue"></div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l256">Zeile 256:</td>
<td colspan="2" class="diff-lineno">Zeile 256:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> </div></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> </div></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></div></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></div></div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div></<del style="font-weight: bold; text-decoration: none;">source</del>></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></<ins style="font-weight: bold; text-decoration: none;">syntaxhighlight</ins>></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==<span id="example7"></span>Positionierung von Widgets==</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==<span id="example7"></span>Positionierung von Widgets==</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l263">Zeile 263:</td>
<td colspan="2" class="diff-lineno">Zeile 263:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Datei:FTUI_Layout_Flex_07.png||thumb|none|x400px]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Datei:FTUI_Layout_Flex_07.png||thumb|none|x400px]]</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><<del style="font-weight: bold; text-decoration: none;">source </del>lang="html"></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><<ins style="font-weight: bold; text-decoration: none;">syntaxhighlight </ins>lang="html"></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><div class="hbox bg-red"></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><div class="hbox bg-red"></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <div class="vbox bg-ligthblue"></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <div class="vbox bg-ligthblue"></div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l304">Zeile 304:</td>
<td colspan="2" class="diff-lineno">Zeile 304:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> </div></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> </div></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></div></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></div></div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div></<del style="font-weight: bold; text-decoration: none;">source</del>></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></<ins style="font-weight: bold; text-decoration: none;">syntaxhighlight</ins>></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==<span id="example8"></span>Seite mit fixem Header und Footer==</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==<span id="example8"></span>Seite mit fixem Header und Footer==</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l313">Zeile 313:</td>
<td colspan="2" class="diff-lineno">Zeile 313:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Datei:FTUI_Layout_Flex_08.png|thumb|none|x400px]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Datei:FTUI_Layout_Flex_08.png|thumb|none|x400px]]</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><<del style="font-weight: bold; text-decoration: none;">source </del>lang="html"></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><<ins style="font-weight: bold; text-decoration: none;">syntaxhighlight </ins>lang="html"></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><body class="vbox" style="flex-wrap: initial; height: 100%;"></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><body class="vbox" style="flex-wrap: initial; height: 100%;"></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <div class="hbox" style="height: auto;"><div data-type="symbol"></div><div data-type="symbol"></div></div></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <div class="hbox" style="height: auto;"><div data-type="symbol"></div><div data-type="symbol"></div></div></div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l319">Zeile 319:</td>
<td colspan="2" class="diff-lineno">Zeile 319:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <div class="hbox" style="height: auto;"><div data-type="symbol"></div><div data-type="symbol"></div></div></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <div class="hbox" style="height: auto;"><div data-type="symbol"></div><div data-type="symbol"></div></div></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></body></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></body></div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div></<del style="font-weight: bold; text-decoration: none;">source</del>></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></<ins style="font-weight: bold; text-decoration: none;">syntaxhighlight</ins>></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==Weblinks==</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==Weblinks==</div></td></tr>
<!-- diff cache key c1fhemwiki:diff:1.41:old-20582:rev-21896:php=table -->
</table>
Markusbloch
http://wiki.fhem.de/w/index.php?title=FTUI_Layout_Flex&diff=20582&oldid=prev
Standarduser: /* Verschiedene horizontale Größen */ Kleinen Fehler korrigiert
2017-03-07T10:01:11Z
<p><span class="autocomment">Verschiedene horizontale Größen: </span> Kleinen Fehler korrigiert</p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="de">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Nächstältere Version</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Version vom 7. März 2017, 12:01 Uhr</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l87">Zeile 87:</td>
<td colspan="2" class="diff-lineno">Zeile 87:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>*'''Box 05''' wird das Doppelte des freien Platzes im Vergleich zu den anderen Boxen in der Reihe eingeräumt</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>*'''Box 05''' wird das Doppelte des freien Platzes im Vergleich zu den anderen Boxen in der Reihe eingeräumt</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>*'''Box 09''' wird das Dreifache des freien Platzes im Vergleich zu den anderen Boxen in der Reihe eingeräumt</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>*'''Box 09''' wird das Dreifache des freien Platzes im Vergleich zu den anderen Boxen in der Reihe eingeräumt</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>*'''Box <del style="font-weight: bold; text-decoration: none;">14</del>''' das Vierfache</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>*'''Box <ins style="font-weight: bold; text-decoration: none;">16</ins>''' das Vierfache</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Auf dem Bild des kleinen Bildschirm erkennt man die Funktionsweise von ''grow-0'': Die '''Box 01''' bleibt immer genau gleich groß.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Auf dem Bild des kleinen Bildschirm erkennt man die Funktionsweise von ''grow-0'': Die '''Box 01''' bleibt immer genau gleich groß.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<!-- diff cache key c1fhemwiki:diff:1.41:old-20577:rev-20582:php=table -->
</table>
Standarduser
http://wiki.fhem.de/w/index.php?title=FTUI_Layout_Flex&diff=20577&oldid=prev
Drhirn am 7. März 2017 um 09:44 Uhr
2017-03-07T09:44:46Z
<p></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="de">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Nächstältere Version</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Version vom 7. März 2017, 11:44 Uhr</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1">Zeile 1:</td>
<td colspan="2" class="diff-lineno">Zeile 1:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><div style="float: right;">__TOC__</div></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><div style="float: right;">__TOC__</div></div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Das [[FTUI Layout Flex|Flex-Layout]] (bzw. hbox-/vbox-Layout) ist ein responsives Layout, welches sich automatisch an die verfügbare Displaygröße anpasst. Mit diesem Layout werden einzelne Boxen definiert, die ihre Position und Größe je nach verfügbarem Platz vorhersagbar ändern.</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Das [[FTUI Layout Flex|Flex-Layout]] (bzw. hbox-/vbox-Layout) ist ein responsives Layout <ins style="font-weight: bold; text-decoration: none;">für [[FHEM Tablet UI]]</ins>, welches sich automatisch an die verfügbare Displaygröße anpasst. Mit diesem Layout werden einzelne Boxen definiert, die ihre Position und Größe je nach verfügbarem Platz vorhersagbar ändern.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Es basiert auf der [https://developer.mozilla.org/de/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes Flexbox-Technologie] von CSS.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Es basiert auf der [https://developer.mozilla.org/de/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes Flexbox-Technologie] von CSS.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<!-- diff cache key c1fhemwiki:diff:1.41:old-20575:rev-20577:php=table -->
</table>
Drhirn
http://wiki.fhem.de/w/index.php?title=FTUI_Layout_Flex&diff=20575&oldid=prev
Drhirn: Die Seite wurde neu angelegt: „<div style="float: right;">__TOC__</div> Das Flex-Layout (bzw. hbox-/vbox-Layout) ist ein responsives Layout, welches sich automatisch an…“
2017-03-07T09:40:12Z
<p>Die Seite wurde neu angelegt: „<div style="float: right;">__TOC__</div> Das <a href="/wiki/FTUI_Layout_Flex" title="FTUI Layout Flex">Flex-Layout</a> (bzw. hbox-/vbox-Layout) ist ein responsives Layout, welches sich automatisch an…“</p>
<p><b>Neue Seite</b></p><div><div style="float: right;">__TOC__</div><br />
Das [[FTUI Layout Flex|Flex-Layout]] (bzw. hbox-/vbox-Layout) ist ein responsives Layout, welches sich automatisch an die verfügbare Displaygröße anpasst. Mit diesem Layout werden einzelne Boxen definiert, die ihre Position und Größe je nach verfügbarem Platz vorhersagbar ändern.<br />
Es basiert auf der [https://developer.mozilla.org/de/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes Flexbox-Technologie] von CSS.<br />
<br />
<br />
Für die Gestaltung können folgende CSS-Klassen verwendet werden:<br />
{| class="wikitable"<br />
!Klasse<br />
!Beschreibung<br />
!CSS-Eigenschaft<br />
|-<br />
|'''vbox'''||Definiert das HTML-Element als vertikalen Container. Die Inhalte werden übereinander angeordnet.||[https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction flex-direction: column]<br />
|-<br />
|'''hbox'''||Definiert das HTML-Element als horizontalen Container. Die Inhalte werden nebeneinander angeordnet.||[https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction flex-direction: row]<br />
|-<br />
|'''card'''||Definiert das HTML-Element als Inhaltsbox.||<br />
|-<br />
|'''phone-width'''||Verhindert, dass das Element schmaler wird, als die verfügbare Displaybreite.||[https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis flex-basis: 320px]<br />
|-<br />
|'''full-height'''||HTML-Element verwendet 100% der sichtbaren Höhe (viewport).||<br />
|-<br />
|'''full-width'''||HTML-Element verwendet 100% der sichtbaren Breite (viewport).||<br />
|-<br />
|'''grow-0'''||Box oder Container dürfen Größe nicht verändern.||[https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow flex-grow: 0]<br />
|-<br />
|'''grow-1'''||Box oder Container wächst gleich, wie die anderen Flex-Elemente||[https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow flex-grow: 1]<br />
|-<br />
|'''grow-2'''||Box oder Container verwendet das doppelte des verfügbaren Platzes im Vergleich zu anderen Flex-Elementen||[https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow flex-grow: 2]<br />
|-<br />
|'''grow-3 ...9'''||Wachstumsfaktor 3 ... 9||[https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow flex-grow: 3]<br />
|-<br />
|'''items-top'''||Elemente in der Flexbox oben anordnen||[https://developer.mozilla.org/en-US/docs/Web/CSS/align-items align-items: flex-start]<br />
|-<br />
|'''items-center'''||Elemente in der Flexbox mittig anordnern||[https://developer.mozilla.org/en-US/docs/Web/CSS/align-items align-items: center]<br />
|-<br />
|'''items-bottom'''||Elemente in der Flexbox am unteren Rand anordnen||[https://developer.mozilla.org/en-US/docs/Web/CSS/align-items align-items: flex-end]<br />
|-<br />
|'''items-space-between'''||Freier Platz wird zwischen den Elementen in der Box verteilt||[https://developer.mozilla.org/de/docs/Web/CSS/justify-content justify-content: space-between]<br />
|-<br />
|'''items-space-around'''||Freier Platz wird gleichmäßig um die Elemente in der Box herum verteilt||[https://developer.mozilla.org/de/docs/Web/CSS/justify-content justify-content: space-around]<br />
|}<br />
<br />
==<span id="example1"></span>Horizontale Flexbox==<br />
In diesem Beispiel erstreckt sich eine vertikale Box über die gesamte Bildschirmgröße. In dieser sind vier horizontale Boxen, die sich untereinander anordnen. In den horizontalen Boxen sind jeweils vier Kacheln definiert, die alle die selbe Größe haben.<br />
<br />
Die vertikale Box wird in diesem Beispiel verwendet, da ansonsten die erste horizontale Box die ganze Bildschirmhöhe einnehmen würde.<br />
<br />
Ändert sich die Bildschirmgröße, ändert sich auch die Größe der horizontalen Boxen bzw. der Kacheln. Sinkt die Displaygröße unter einen bestimmten Wert, werden die Kacheln automatisch untereinander angeordnet.<br />
<br />
<div><ul> <br />
<li style="display: inline-block;"> [[File:FTUI_Layout_Flex_01.png|thumb|none|x400px|Großer Bildschirm]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Layout_Flex_01_1.png|thumb|none|x400px|Kleiner Bildschirm]] </li><br />
</ul></div><br />
<br />
<source lang="html"><br />
<div class="vbox bg-red"><br />
<div class="hbox bg-ligthblue"><br />
<div class="card"><header>Box 01</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 02</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 03</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 04</header><div data-type="symbol"></div></div><br />
</div><br />
<div class="hbox bg-lightgray"><br />
<div class="card"><header>Box 05</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 06</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 07</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 08</header><div data-type="symbol"></div></div><br />
</div><br />
<div class="hbox bg-mint"><br />
<div class="card"><header>Box 09</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 10</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 11</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 12</header><div data-type="symbol"></div></div><br />
</div><br />
<div class="hbox bg-orange"><br />
<div class="card"><header>Box 13</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 14</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 15</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 16</header><div data-type="symbol"></div></div><br />
</div><br />
</div><br />
</source><br />
<br />
==<span id="example2"></span>Verschiedene horizontale Größen==<br />
Hier ist die Verwendung unterschiedlicher Größen veranschaulicht.<br />
*'''Box 01''' ist auf eine fixe Größe beschränkt<br />
*'''Box 05''' wird das Doppelte des freien Platzes im Vergleich zu den anderen Boxen in der Reihe eingeräumt<br />
*'''Box 09''' wird das Dreifache des freien Platzes im Vergleich zu den anderen Boxen in der Reihe eingeräumt<br />
*'''Box 14''' das Vierfache<br />
Auf dem Bild des kleinen Bildschirm erkennt man die Funktionsweise von ''grow-0'': Die '''Box 01''' bleibt immer genau gleich groß.<br />
<br />
Zusätzlich sind in diesem Beispiel noch die Optionen '''items-top''' (erste Kachelzeile) und '''items-bottom''' (letzte Kachelzeile) dargestellt.<br />
<br />
<br />
<div><ul> <br />
<li style="display: inline-block;"> [[File:FTUI_Layout_Flex_02.png|thumb|none|x400px|Großer Bildschirm]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Layout_Flex_02_1.png|thumb|none|x400px|Kleiner Bildschirm]] </li><br />
</ul></div><br />
<br />
<source lang="html"><br />
<div class="vbox bg-red"><br />
<div class="hbox items-top bg-ligthblue"><br />
<div class="card grow-0"><header>Box 01</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 02</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 03</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 04</header><div data-type="symbol"></div></div><br />
</div><br />
<div class="hbox bg-lightgray"><br />
<div class="card grow-2"><header>Box 05</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 06</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 07</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 08</header><div data-type="symbol"></div></div><br />
</div><br />
<div class="hbox bg-mint"><br />
<div class="card grow-3"><header>Box 09</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 10</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 11</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 12</header><div data-type="symbol"></div></div><br />
</div><br />
<div class="hbox items-bottom bg-orange"><br />
<div class="card"><header>Box 13</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 14</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 15</header><div data-type="symbol"></div></div><br />
<div class="card grow-4"><header>Box 16</header><div data-type="symbol"></div></div><br />
</div><br />
</div><br />
</source><br />
<br />
==<span id="example3"></span>Vertikale Flexbox==<br />
Das ist die um 90° gedrehte Version des ersten Beispiels. Eine horizontale Flexbox erstreckt sich über den gesamten sichtbaren Bereich des Browserfensters. Innerhalb dieser sind vier vertikale Flexboxen nebeneinander, welche wiederum jeweils vier Kacheln enthalten.<br />
<br />
[[Datei:FTUI_Layout_Flex_03.png|thumb|none|x400px]]<br />
<br />
<source lang="html"><br />
<div class="hbox bg-red"><br />
<div class="vbox bg-ligthblue"><br />
<div class="card"><header>Box 01</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 02</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 03</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 04</header><div data-type="symbol"></div></div><br />
</div><br />
<div class="vbox bg-lightgray"><br />
<div class="card"><header>Box 05</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 06</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 07</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 08</header><div data-type="symbol"></div></div><br />
</div><br />
<div class="vbox bg-mint"><br />
<div class="card"><header>Box 09</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 10</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 11</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 12</header><div data-type="symbol"></div></div><br />
</div><br />
<div class="vbox bg-orange"><br />
<div class="card"><header>Box 13</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 14</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 15</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 16</header><div data-type="symbol"></div></div><br />
</div><br />
</div><br />
</source><br />
<br />
==<span id="example4"></span>Verschiedene vertikale Größen==<br />
[[Datei:FTUI_Layout_Flex_04.png|thumb|none|x400px]]<br />
<source lang="html"><br />
<div class="hbox bg-red"><br />
<div class="vbox bg-ligthblue"><br />
<div class="card grow-0"><header>Box 01</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 02</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 03</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 04</header><div data-type="symbol"></div></div><br />
</div><br />
<div class="vbox bg-lightgray"><br />
<div class="card grow-1"><header>Box 05</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 06</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 07</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 08</header><div data-type="symbol"></div></div><br />
</div><br />
<div class="vbox bg-mint"><br />
<div class="card grow-2"><header>Box 09</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 10</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 11</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 12</header><div data-type="symbol"></div></div><br />
</div><br />
<div class="vbox bg-orange"><br />
<div class="card grow-3"><header>Box 13</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 14</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 15</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 16</header><div data-type="symbol"></div></div><br />
</div><br />
</div><br />
</source><br />
<br />
==<span id="example5"></span>Unterschiedliche Anzahl an Kacheln==<br />
Dieses Beispiel demonstriert die Verwendung unterschiedlicher Anzahlen von Kacheln. Die Kacheln werden automatisch an den verfügbaren Platz in ihrer Flexbox angepasst.<br />
<br />
[[Datei:FTUI_Layout_Flex_05.png|thumb|none|x400px]]<br />
<br />
<source lang="html"><br />
<div class="hbox bg-red"><br />
<div class="vbox bg-ligthblue"><br />
<div class="card"><header>Box 01</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 02</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 03</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 04</header><div data-type="symbol"></div></div><br />
</div><br />
<div class="vbox bg-lightgray"><br />
<div class="card"><header>Box 05</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 06</header><div data-type="symbol"></div></div><br />
</div><br />
<div class="vbox bg-mint"><br />
<div class="card grow-2"><header>Box 07</header><div data-type="symbol"></div></div><br />
<div class="card grow-0"><header>Box 08</header><div data-type="symbol"></div></div><br />
<div class="card grow-0"><header>Box 09</header><div data-type="symbol"></div></div><br />
</div><br />
<div class="vbox bg-orange"><br />
<div class="card"><header>Box 10</header><div data-type="symbol"></div></div><br />
</div><br />
</div><br />
</source><br />
<br />
==<span id="example6"></span>Kombination von hbox und vbox==<br />
Natürlich ist es auch möglich, mehrere Flexboxen zu verschachteln. In diesem Beispiel sind drei vertikale Boxen nebeneinander. In der mittleren befinden sich wiederum drei horizontale Boxen.<br />
<br />
Die mittlere Box darf ihre Größe der Bildschirmbreite anpassen, die beiden am Rand bleiben immer gleich breit.<br />
<br />
[[Datei:FTUI_Layout_Flex_06.png|thumb|none|x400px]]<br />
<br />
<source lang="html"><br />
<div class="hbox bg-red"><br />
<div class="vbox grow-0 bg-ligthblue"><br />
<div class="card"><header>Box 01</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 02</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 03</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 04</header><div data-type="symbol"></div></div><br />
</div><br />
<div class="vbox bg-lightgray"><br />
<div class="hbox"><br />
<div class="card"><header>Box 05</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 06</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 07</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 08</header><div data-type="symbol"></div></div><br />
</div><br />
<div class="hbox bg-mint"><br />
<div class="card grow-2"><header>Box 09</header><div data-type="symbol"></div></div><br />
<div class="card grow-0"><header>Box 10</header><div data-type="symbol"></div></div><br />
<div class="card grow-0"><header>Box 11</header><div data-type="symbol"></div></div><br />
</div><br />
<div class="hbox bg-red"><br />
<div class="card grow-1"><header>Box 12</header><div data-type="symbol"></div></div><br />
<div class="card grow-1"><header>Box 13</header><div data-type="symbol"></div></div><br />
</div><br />
</div><br />
<div class="vbox grow-0 bg-orange"><br />
<div class="card"><header>Box 14</header><div data-type="symbol"></div></div><br />
</div><br />
</div><br />
</source><br />
<br />
==<span id="example7"></span>Positionierung von Widgets==<br />
Es können auch einzelne oder mehrere Widgets mit dem Flex-Layout positioniert werden. Hier zu sehen an den Symbol-Widgets in Kachel 5 und 9.<br />
<br />
[[Datei:FTUI_Layout_Flex_07.png||thumb|none|x400px]]<br />
<br />
<source lang="html"><br />
<div class="hbox bg-red"><br />
<div class="vbox bg-ligthblue"><br />
<div class="card"><header>Box 01</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 02</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 03</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 04</header><div data-type="symbol"></div></div><br />
</div><br />
<div class="vbox bg-lightgray"><br />
<div class="hbox"><br />
<div class="card"><br />
<header>Box 05</header><br />
<div class="vbox"><br />
<div data-type="symbol"></div><br />
<div data-type="symbol"></div><br />
</div><br />
</div><br />
<div class="card"><header>Box 06</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 07</header><div data-type="symbol"></div></div><br />
<div class="card"><header>Box 08</header><div data-type="symbol"></div></div><br />
</div><br />
<div class="hbox bg-mint"><br />
<div class="card grow-2"><br />
<header>Box 09</header><br />
<div class="hbox"><br />
<div data-type="symbol"></div><br />
<div data-type="symbol"></div><br />
</div><br />
</div><br />
<div class="card grow-0"><header>Box 10</header><div data-type="symbol"></div></div><br />
<div class="card grow-0"><header>Box 11</header><div data-type="symbol"></div></div><br />
</div><br />
<div class="hbox bg-red"><br />
<div class="card grow-1"><header>Box 12</header><div data-type="symbol"></div></div><br />
<div class="card grow-1"><header>Box 13</header><div data-type="symbol"></div></div><br />
</div><br />
</div><br />
<div class="vbox grow-0 bg-orange"><br />
<div class="card"><header>Box 14</header><div data-type="symbol"></div></div><br />
</div><br />
</div><br />
</source><br />
<br />
==<span id="example8"></span>Seite mit fixem Header und Footer==<br />
Ein oft geäußerter Wunsch ist eine responsive Webseite mit fixierten Kopf- und Fußteil ([https://en.wikipedia.org/wiki/Holy_Grail_(web_design) Holy Grail Layout]). Mit CSS-Flexboxen lässt sich das leicht umsetzen.<br />
<br />
So eine Darstellung kann auch mit dem FTUI Flex Layout umgesetzt werden. Allerdings müssen zusätzliche CSS-Eigenschaften definiert, bzw. vorhandenen überschrieben werden.<br />
<br />
[[Datei:FTUI_Layout_Flex_08.png|thumb|none|x400px]]<br />
<br />
<source lang="html"><br />
<body class="vbox" style="flex-wrap: initial; height: 100%;"><br />
<div class="hbox" style="height: auto;"><div data-type="symbol"></div><div data-type="symbol"></div></div><br />
<div style="flex: 1 1 auto; overflow-y: auto;">Lorem ipsum ...</div><br />
<div class="hbox" style="height: auto;"><div data-type="symbol"></div><div data-type="symbol"></div></div><br />
</body><br />
</source><br />
<br />
==Weblinks==<br />
*[https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Gr%C3%B6%C3%9Fenangaben/Flexbox SelfHTML - Flexbox]<br />
*[https://developer.mozilla.org/de/docs/Web/CSS/CSS_Flexible_Box_Layout Mozilla Developer Network - Flexbox]<br />
<br />
[[Kategorie:FHEM Tablet UI]]</div>
Drhirn