public/web-development/presentation.git

Commits
Diff

2023-09-12

Sascha Schulz

add css units and css flexbox

1a7461

Diff | Dateibaum

2023-09-12

Sascha Schulz

add figure for display: hidden

a57a2f

Diff | Dateibaum

1 Dateien geändert

4 Dateien hinzugefügt

	assets/drawio/css-display-hidden.drawio	1 ●●●●● Patch \| Ansicht \| Raw \| Blame \| Historie
	assets/drawio/css-flexbox-axes.drawio	1 ●●●●● Patch \| Ansicht \| Raw \| Blame \| Historie
	assets/images/css-display-hidden.svg	3 ●●●●● Patch \| Ansicht \| Raw \| Blame \| Historie
	assets/images/css-flexbox-axes.drawio.svg	4 ●●●●● Patch \| Ansicht \| Raw \| Blame \| Historie
	index.html	63 ●●●●● Patch \| Ansicht \| Raw \| Blame \| Historie

 assets/drawio/css-display-hidden.drawio

Neue Datei
@@ -0,0 +1 @@
<mxfile host="Electron" modified="2023-09-12T13:18:41.424Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36" etag="yELeomthnCWvZNOXV68F" version="16.1.2" type="device"><diagram id="BGdbwjortsLvGND2NXud" name="Page-1">3ZVRT4MwEMc/DY8zQGGMR4dzxsT4MKPxsaEnbSwtlm4wP71llAFhJu5hWeITx//+vbv+2oCDkrxeK1zQJ0mAO75LagfdOb7vx4FvHo2ytwqKUKtkipFW83phw77Biq5Vt4xAOTJqKblmxVhMpRCQ6pGGlZLV2PYh+bhrgTOYCJsU86n6xoimrbrwo15/AJbRrrM3j9tMjjuz3UlJMZHVQEIrByVKSt1GeZ0Ab+h1XNp1979kj4MpEPovC+LXtS/512PxUkWLd/ac+MnnLGir7DDf2g3bYfW+I6DkVhBoirgOWlaUadgUOG2ylTl0o1Gdc/PmmXA6lJ1zB0pDPZDskGuQOWi1NxZ7RWY9w6onHs4tRjqgHVoftoecHYv1HExgUZyBBZ3AMuem67IssDBx1sSElQXHZuzbpp7gTEBnM12HzutB7bKWXs84jG/CCWUvOkE5cC9EefHvKMcTzN21vRrk6HzIlBEC4iKQCS7pwXs54uH0WgcngKPzgZvX/nN9yA3+emj1Aw==</diagram></mxfile>

 assets/drawio/css-flexbox-axes.drawio

Neue Datei
@@ -0,0 +1 @@
<mxfile host="Electron" modified="2023-09-12T13:59:02.323Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36" etag="SCN2xg8pfs_WjAf-8hVx" version="16.1.2" type="device"><diagram id="qX8B151_wiXKYsOxSvGI" name="Page-1">7Vpbc6IwFP41PtYh3ITHql27s9uZzviwu48pRMksEieEqv31m0hAAlhcqyXjbl9KDsmB850v5xIZWJPVdkbhOnoiIYoHphFuB9Z0YJrA9QD/JyS7XOJ6Xi5YUhzKSQfBHL8hKTSkNMMhSpWJjJCY4bUqDEiSoIApMkgp2ajTFiRWn7qGS9QQzAMYN6U/cMiiXOqZo4P8EeFlVDwZuH5+ZwWLydKSNIIh2VRE1sPAmlBCWH612k5QLMArcMnXfTlyt3wxihJ2yoLZfIcyjL6Go+xp5ozsGdrO76SWVxhn0mD5smxXIEBJloRIKDEG1ngTYYbmaxiIuxvucy6L2CrmI8AvpTpEGdoefU9QWs9pg8gKMbrjU+QCR+IlCWPL4eaAvm1IWVRFvlgHpceXpeYDKPxC4vIXGJn6YeSqGDlNjIDZgpF7LYgs/SACvmYY2fphZJmaYeR3Y4SS8F7EdT4KYpimOFBhUTFEW8x+iuuhI0e/lNF0W5k43VUGz4hibhSihSzhBkpVnlUIKtrE8KBuP9pVR3WFuWUobOSfmve49SSjAeqOUAzSJWJdFGyyoeJup8XbhYyiGDL8qr5uGwXkE54J5oaUZLNHtcDu1ViUmylXVRNZTZFTY61t1RTlODQU7RlZmn0+SYHbYOkjzNYMBlGKmnzlDv4OX3hZpNAUxniZCA5zZwtKjMVGxrzuuJc3VjgMhY4xRSl+gy97fYI3a2HX3lJnPHCm70UCWRTJxWWFoHDs+D48GjbujCEwHU9xQlFJfJAkwGzVWiggi0WKruNUDSsh2+8shcxRy4Yt/Xzx+Fy4RyeUHEOzJAY0rIbqIJWI9IeShvVQAyW/d5ScbpR0qIj0qoeKMNVZEIFeKyIfXKgi8t2eK6JRg6W3VhHlG/G9kshwgf8xWnxClePpF3Rd7TLTCV1o36cZ/aNUPEwnlOrnGRqgdEJb8T9/n3uekYez3g40aunbPDd927UQaH5y+i44WSHpN4qytxtK3x2Bwxhanm9+jBXlkYWvLrleNjc1bDRdS+Vy7924qWGfWQdJgzx1Qp/ZO0q9d+PmCeXzP5fNO7N0Hqb6ytKO4w9d1yj/gMKps3+DeFdr47foayfwZsdycwn8SKl3wQRetPL10/PrJXCr2UMtYrS9CzHlIGHCUb/fgxZnq6ThR44tU12YMkp+owmJidjGCUmEtxY4jmui013dFuXVCHaBQA9GLYHdbQkJ9br4ct8vNNu0NkeIsH6zXnBs52pe4MPDh0757jl8LmY9/AE=</diagram></mxfile>

 assets/images/css-display-hidden.svg

Neue Datei
@@ -0,0 +1,3 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="581px" height="80px" viewBox="-0.5 -0.5 581 80"><defs/><g><rect x="10" y="10" width="560" height="59" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="20" y="19.5" width="170" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 40px; margin-left: 21px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><span>display: inline</span></div></div></div></foreignObject><text x="105" y="43" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">display: inline</text></switch></g><rect x="200" y="19" width="170" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 39px; margin-left: 201px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><span>display: inline</span></div></div></div></foreignObject><text x="285" y="43" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">display: inline</text></switch></g><rect x="200" y="24" width="40" height="30" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" stroke-dasharray="3 3" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 39px; margin-left: 201px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><span>display: hidden</span></div></div></div></foreignObject><text x="220" y="43" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">displa...</text></switch></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg>

 assets/images/css-flexbox-axes.drawio.svg

Neue Datei
@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- Do not edit this file with editors other than diagrams.net -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="731px" height="281px" viewBox="-0.5 -0.5 731 281" content="&lt;mxfile host=&quot;Electron&quot; modified=&quot;2023-09-12T13:59:43.123Z&quot; agent=&quot;5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36&quot; etag=&quot;69Ageqy83Rsu2R08sULi&quot; version=&quot;16.1.2&quot; type=&quot;device&quot;&gt;&lt;diagram id=&quot;qX8B151_wiXKYsOxSvGI&quot; name=&quot;Page-1&quot;&gt;7Vpbc6IwFP41PtYh3ITHql27s9uZzviwu48pRMksEieEqv31m0hAAlhcqyXjbl9KDsmB850v5xIZWJPVdkbhOnoiIYoHphFuB9Z0YJrA9QD/JyS7XOJ6Xi5YUhzKSQfBHL8hKTSkNMMhSpWJjJCY4bUqDEiSoIApMkgp2ajTFiRWn7qGS9QQzAMYN6U/cMiiXOqZo4P8EeFlVDwZuH5+ZwWLydKSNIIh2VRE1sPAmlBCWH612k5QLMArcMnXfTlyt3wxihJ2yoLZfIcyjL6Go+xp5ozsGdrO76SWVxhn0mD5smxXIEBJloRIKDEG1ngTYYbmaxiIuxvucy6L2CrmI8AvpTpEGdoefU9QWs9pg8gKMbrjU+QCR+IlCWPL4eaAvm1IWVRFvlgHpceXpeYDKPxC4vIXGJn6YeSqGDlNjIDZgpF7LYgs/SACvmYY2fphZJmaYeR3Y4SS8F7EdT4KYpimOFBhUTFEW8x+iuuhI0e/lNF0W5k43VUGz4hibhSihSzhBkpVnlUIKtrE8KBuP9pVR3WFuWUobOSfmve49SSjAeqOUAzSJWJdFGyyoeJup8XbhYyiGDL8qr5uGwXkE54J5oaUZLNHtcDu1ViUmylXVRNZTZFTY61t1RTlODQU7RlZmn0+SYHbYOkjzNYMBlGKmnzlDv4OX3hZpNAUxniZCA5zZwtKjMVGxrzuuJc3VjgMhY4xRSl+gy97fYI3a2HX3lJnPHCm70UCWRTJxWWFoHDs+D48GjbujCEwHU9xQlFJfJAkwGzVWiggi0WKruNUDSsh2+8shcxRy4Yt/Xzx+Fy4RyeUHEOzJAY0rIbqIJWI9IeShvVQAyW/d5ScbpR0qIj0qoeKMNVZEIFeKyIfXKgi8t2eK6JRg6W3VhHlG/G9kshwgf8xWnxClePpF3Rd7TLTCV1o36cZ/aNUPEwnlOrnGRqgdEJb8T9/n3uekYez3g40aunbPDd927UQaH5y+i44WSHpN4qytxtK3x2Bwxhanm9+jBXlkYWvLrleNjc1bDRdS+Vy7924qWGfWQdJgzx1Qp/ZO0q9d+PmCeXzP5fNO7N0Hqb6ytKO4w9d1yj/gMKps3+DeFdr47foayfwZsdycwn8SKl3wQRetPL10/PrJXCr2UMtYrS9CzHlIGHCUb/fgxZnq6ThR44tU12YMkp+owmJidjGCUmEtxY4jmui013dFuXVCHaBQA9GLYHdbQkJ9br4ct8vNNu0NkeIsH6zXnBs52pe4MPDh0757jl8LmY9/AE=&lt;/diagram&gt;&lt;/mxfile&gt;"><defs/><g><rect x="10" y="50" width="400" height="150" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="20" y="60" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="150" y="60" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="280" y="60" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><path d="M 80 90 L 343.59 90" fill="none" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 348.84 90 L 341.84 93.5 L 343.59 90 L 341.84 86.5 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 90px; margin-left: 210px;"><div data-drawio-colors="color: rgb(240, 240, 240); background-color: rgb(42, 42, 42); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; background-color: rgb(42, 42, 42); white-space: nowrap;">Hauptachse</div></div></div></foreignObject><text x="210" y="94" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="11px" text-anchor="middle">Hauptachse</text></switch></g><rect x="450" y="50" width="270" height="220" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="460" y="60" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="460" y="130" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="460" y="200" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><path d="M 520 90 L 520 223.63" fill="none" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 520 228.88 L 516.5 221.88 L 520 223.63 L 523.5 221.88 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 156px; margin-left: 520px;"><div data-drawio-colors="color: rgb(240, 240, 240); background-color: rgb(42, 42, 42); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; background-color: rgb(42, 42, 42); white-space: nowrap;">Hauptachse</div></div></div></foreignObject><text x="520" y="159" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="11px" text-anchor="middle">Hauptachse</text></switch></g><rect x="20" y="130" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="150" y="130" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="280" y="130" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><path d="M 80 90 L 80 153.63" fill="none" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 80 158.88 L 76.5 151.88 L 80 153.63 L 83.5 151.88 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 120px; margin-left: 80px;"><div data-drawio-colors="color: rgb(240, 240, 240); background-color: rgb(42, 42, 42); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; background-color: rgb(42, 42, 42); white-space: nowrap;">Kreuzachse</div></div></div></foreignObject><text x="80" y="123" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="11px" text-anchor="middle">Kreuzachse</text></switch></g><rect x="590" y="60" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="590" y="130" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="590" y="200" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><path d="M 519.66 90 L 643.63 90" fill="none" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 648.88 90 L 641.88 93.5 L 643.63 90 L 641.88 86.5 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 90px; margin-left: 590px;"><div data-drawio-colors="color: rgb(240, 240, 240); background-color: rgb(42, 42, 42); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; background-color: rgb(42, 42, 42); white-space: nowrap;">Kreuzachse</div></div></div></foreignObject><text x="590" y="94" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="11px" text-anchor="middle">Kreuzachse</text></switch></g><rect x="130" y="10" width="160" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 158px; height: 1px; padding-top: 25px; margin-left: 131px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">flex-direction: column</div></div></div></foreignObject><text x="210" y="29" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">flex-direction: column</text></switch></g><rect x="505" y="10" width="160" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 158px; height: 1px; padding-top: 25px; margin-left: 506px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">flex-direction: row</div></div></div></foreignObject><text x="585" y="29" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">flex-direction: row</text></switch></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg>

 index.html

@@ -2903,6 +2903,14 @@
                        </ul>
                    </section>
                    <section>
                        <p>hidden</p>
                        <img data-src="/assets/images/css-display-hidden.svg">
                        <ul>
                            <li>unsichtbar</li>
                            <li>Platz wird nicht länger beansprucht, so als wenn das Element nicht im DOM wäre</li>
                        </ul>
                    </section>
                    <section>
                        <h3>Das <code>position</code>-Attribut</h3>
                    </section>
                    <section>
@@ -2991,6 +2999,7 @@
                                &lt;/html>
                            </code>
                        </pre>
                        <p>Ein Muss für alle responsiven Seiten</p>
                    </section>
                    <section>
                        <pre>
@@ -3001,6 +3010,60 @@
                            </code>
                        </pre>
                    </section>
                    <section>
                        <h3>Einheiten</h3>
                        <pre>
                            <code class="css" data-trim data-line-numbers="">
                                div {
                                    width: 1px; /* Pixel */
                                    width: 1pt; /* Points */
                                    width: 1em; /* Breite des "M" in der Schriftgröße des Elements */
                                    width: 1rem; /* Breite des "M" in der Schriftgröße des HTML-Elements */
                                    width: 1vw; /* Prozent der View Width */
                                    width: 1%; /* Prozent des Elternelements */
									
                                    width: 5fr; /* Fraction (nur im CSS Grid verfügbar) */
                                }
                            </code>
                        </pre>
                    </section>
                    <section>
                        <h3>Aufgabe</h3>
                        <p>Größeneinheiten in einer HTML-Datei ausprobieren</p>
                    </section>
                    <section>
                        <h3>CSS Flexbox</h3>
                        <pre>
                            <code class="css" data-trim data-line-numbers="">
                                .container {
                                    display: flex; /* soll ein flexibler Container sein */
                                    display: inline-flex;
								
                                    flex-direction: column; /* Kinder spaltenweise anordnen */
                                    flex-direction: row; /* Kinder zeilenweise anordnen */
								
                                    align-items: center;
                                    justify-content: center;
								
                                    gap: 20px; /* Abstände zwischen den Achsen */
                                }
								
                                .child {
                                    flex-grow: 1; /* Anteiliger Platz, wenn mehr als nötig da ist */
                                    flex-shrink: 1; /* Anteiliger Platz, wenn weniger als nötig da ist */
                                    flex-basis: 20px; /* Grundlage zur Berechnung der finalen Größe */
                                    order: 1; /* Erlaubt die Darstellung in anderer Reihenfolge als durch das HTML vorgegeben */
                                }
                            </code>
                        </pre>
                    </section>
                    <section>
                        <img data-src="/assets/images/css-flexbox-axes.drawio.svg">
                    </section>
                    <section>
                        <h3>Aufgabe</h3>
                        <p>Mit CSS Flexbox rumspielen</p>
                    </section>
                </section>
            </div>
        </div>

Neue Datei
			@@ -0,0 +1 @@
			<mxfile host="Electron" modified="2023-09-12T13:18:41.424Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36" etag="yELeomthnCWvZNOXV68F" version="16.1.2" type="device"><diagram id="BGdbwjortsLvGND2NXud" name="Page-1">3ZVRT4MwEMc/DY8zQGGMR4dzxsT4MKPxsaEnbSwtlm4wP71llAFhJu5hWeITx//+vbv+2oCDkrxeK1zQJ0mAO75LagfdOb7vx4FvHo2ytwqKUKtkipFW83phw77Biq5Vt4xAOTJqKblmxVhMpRCQ6pGGlZLV2PYh+bhrgTOYCJsU86n6xoimrbrwo15/AJbRrrM3j9tMjjuz3UlJMZHVQEIrByVKSt1GeZ0Ab+h1XNp1979kj4MpEPovC+LXtS/512PxUkWLd/ac+MnnLGir7DDf2g3bYfW+I6DkVhBoirgOWlaUadgUOG2ylTl0o1Gdc/PmmXA6lJ1zB0pDPZDskGuQOWi1NxZ7RWY9w6onHs4tRjqgHVoftoecHYv1HExgUZyBBZ3AMuem67IssDBx1sSElQXHZuzbpp7gTEBnM12HzutB7bKWXs84jG/CCWUvOkE5cC9EefHvKMcTzN21vRrk6HzIlBEC4iKQCS7pwXs54uH0WgcngKPzgZvX/nN9yA3+emj1Aw==</diagram></mxfile>

Neue Datei
			@@ -0,0 +1,3 @@
			<?xml version="1.0" encoding="UTF-8"?>
			<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
			<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="581px" height="80px" viewBox="-0.5 -0.5 581 80"><defs/><g><rect x="10" y="10" width="560" height="59" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="20" y="19.5" width="170" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 40px; margin-left: 21px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><span>display: inline</span></div></div></div></foreignObject><text x="105" y="43" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">display: inline</text></switch></g><rect x="200" y="19" width="170" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 39px; margin-left: 201px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><span>display: inline</span></div></div></div></foreignObject><text x="285" y="43" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">display: inline</text></switch></g><rect x="200" y="24" width="40" height="30" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" stroke-dasharray="3 3" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 39px; margin-left: 201px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><span>display: hidden</span></div></div></div></foreignObject><text x="220" y="43" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">displa...</text></switch></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg>

Neue Datei
			@@ -0,0 +1,4 @@
			<?xml version="1.0" encoding="UTF-8"?>
			<!-- Do not edit this file with editors other than diagrams.net -->
			<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
			<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="731px" height="281px" viewBox="-0.5 -0.5 731 281" content="<mxfile host="Electron" modified="2023-09-12T13:59:43.123Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36" etag="69Ageqy83Rsu2R08sULi" version="16.1.2" type="device"><diagram id="qX8B151_wiXKYsOxSvGI" name="Page-1">7Vpbc6IwFP41PtYh3ITHql27s9uZzviwu48pRMksEieEqv31m0hAAlhcqyXjbl9KDsmB850v5xIZWJPVdkbhOnoiIYoHphFuB9Z0YJrA9QD/JyS7XOJ6Xi5YUhzKSQfBHL8hKTSkNMMhSpWJjJCY4bUqDEiSoIApMkgp2ajTFiRWn7qGS9QQzAMYN6U/cMiiXOqZo4P8EeFlVDwZuH5+ZwWLydKSNIIh2VRE1sPAmlBCWH612k5QLMArcMnXfTlyt3wxihJ2yoLZfIcyjL6Go+xp5ozsGdrO76SWVxhn0mD5smxXIEBJloRIKDEG1ngTYYbmaxiIuxvucy6L2CrmI8AvpTpEGdoefU9QWs9pg8gKMbrjU+QCR+IlCWPL4eaAvm1IWVRFvlgHpceXpeYDKPxC4vIXGJn6YeSqGDlNjIDZgpF7LYgs/SACvmYY2fphZJmaYeR3Y4SS8F7EdT4KYpimOFBhUTFEW8x+iuuhI0e/lNF0W5k43VUGz4hibhSihSzhBkpVnlUIKtrE8KBuP9pVR3WFuWUobOSfmve49SSjAeqOUAzSJWJdFGyyoeJup8XbhYyiGDL8qr5uGwXkE54J5oaUZLNHtcDu1ViUmylXVRNZTZFTY61t1RTlODQU7RlZmn0+SYHbYOkjzNYMBlGKmnzlDv4OX3hZpNAUxniZCA5zZwtKjMVGxrzuuJc3VjgMhY4xRSl+gy97fYI3a2HX3lJnPHCm70UCWRTJxWWFoHDs+D48GjbujCEwHU9xQlFJfJAkwGzVWiggi0WKruNUDSsh2+8shcxRy4Yt/Xzx+Fy4RyeUHEOzJAY0rIbqIJWI9IeShvVQAyW/d5ScbpR0qIj0qoeKMNVZEIFeKyIfXKgi8t2eK6JRg6W3VhHlG/G9kshwgf8xWnxClePpF3Rd7TLTCV1o36cZ/aNUPEwnlOrnGRqgdEJb8T9/n3uekYez3g40aunbPDd927UQaH5y+i44WSHpN4qytxtK3x2Bwxhanm9+jBXlkYWvLrleNjc1bDRdS+Vy7924qWGfWQdJgzx1Qp/ZO0q9d+PmCeXzP5fNO7N0Hqb6ytKO4w9d1yj/gMKps3+DeFdr47foayfwZsdycwn8SKl3wQRetPL10/PrJXCr2UMtYrS9CzHlIGHCUb/fgxZnq6ThR44tU12YMkp+owmJidjGCUmEtxY4jmui013dFuXVCHaBQA9GLYHdbQkJ9br4ct8vNNu0NkeIsH6zXnBs52pe4MPDh0757jl8LmY9/AE=</diagram></mxfile>"><defs/><g><rect x="10" y="50" width="400" height="150" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="20" y="60" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="150" y="60" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="280" y="60" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><path d="M 80 90 L 343.59 90" fill="none" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 348.84 90 L 341.84 93.5 L 343.59 90 L 341.84 86.5 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 90px; margin-left: 210px;"><div data-drawio-colors="color: rgb(240, 240, 240); background-color: rgb(42, 42, 42); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; background-color: rgb(42, 42, 42); white-space: nowrap;">Hauptachse</div></div></div></foreignObject><text x="210" y="94" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="11px" text-anchor="middle">Hauptachse</text></switch></g><rect x="450" y="50" width="270" height="220" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="460" y="60" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="460" y="130" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="460" y="200" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><path d="M 520 90 L 520 223.63" fill="none" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 520 228.88 L 516.5 221.88 L 520 223.63 L 523.5 221.88 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 156px; margin-left: 520px;"><div data-drawio-colors="color: rgb(240, 240, 240); background-color: rgb(42, 42, 42); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; background-color: rgb(42, 42, 42); white-space: nowrap;">Hauptachse</div></div></div></foreignObject><text x="520" y="159" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="11px" text-anchor="middle">Hauptachse</text></switch></g><rect x="20" y="130" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="150" y="130" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="280" y="130" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><path d="M 80 90 L 80 153.63" fill="none" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 80 158.88 L 76.5 151.88 L 80 153.63 L 83.5 151.88 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 120px; margin-left: 80px;"><div data-drawio-colors="color: rgb(240, 240, 240); background-color: rgb(42, 42, 42); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; background-color: rgb(42, 42, 42); white-space: nowrap;">Kreuzachse</div></div></div></foreignObject><text x="80" y="123" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="11px" text-anchor="middle">Kreuzachse</text></switch></g><rect x="590" y="60" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="590" y="130" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="590" y="200" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><path d="M 519.66 90 L 643.63 90" fill="none" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 648.88 90 L 641.88 93.5 L 643.63 90 L 641.88 86.5 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 90px; margin-left: 590px;"><div data-drawio-colors="color: rgb(240, 240, 240); background-color: rgb(42, 42, 42); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; background-color: rgb(42, 42, 42); white-space: nowrap;">Kreuzachse</div></div></div></foreignObject><text x="590" y="94" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="11px" text-anchor="middle">Kreuzachse</text></switch></g><rect x="130" y="10" width="160" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 158px; height: 1px; padding-top: 25px; margin-left: 131px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">flex-direction: column</div></div></div></foreignObject><text x="210" y="29" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">flex-direction: column</text></switch></g><rect x="505" y="10" width="160" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 158px; height: 1px; padding-top: 25px; margin-left: 506px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">flex-direction: row</div></div></div></foreignObject><text x="585" y="29" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">flex-direction: row</text></switch></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg>

			@@ -2903,6 +2903,14 @@
			</ul>
			</section>
			<section>
			<p>hidden</p>
			<img data-src="/assets/images/css-display-hidden.svg">
			<ul>
			<li>unsichtbar</li>
			<li>Platz wird nicht länger beansprucht, so als wenn das Element nicht im DOM wäre</li>
			</ul>
			</section>
			<section>
			<h3>Das <code>position</code>-Attribut</h3>
			</section>
			<section>
			@@ -2991,6 +2999,7 @@
			</html>
			</code>
			</pre>
			<p>Ein Muss für alle responsiven Seiten</p>
			</section>
			<section>
			<pre>
			@@ -3001,6 +3010,60 @@
			</code>
			</pre>
			</section>
			<section>
			<h3>Einheiten</h3>
			<pre>
			<code class="css" data-trim data-line-numbers="">
			div {
			width: 1px; /* Pixel */
			width: 1pt; /* Points */
			width: 1em; /* Breite des "M" in der Schriftgröße des Elements */
			width: 1rem; /* Breite des "M" in der Schriftgröße des HTML-Elements */
			width: 1vw; /* Prozent der View Width */
			width: 1%; /* Prozent des Elternelements */

			width: 5fr; /* Fraction (nur im CSS Grid verfügbar) */
			}
			</code>
			</pre>
			</section>
			<section>
			<h3>Aufgabe</h3>
			<p>Größeneinheiten in einer HTML-Datei ausprobieren</p>
			</section>
			<section>
			<h3>CSS Flexbox</h3>
			<pre>
			<code class="css" data-trim data-line-numbers="">
			.container {
			display: flex; /* soll ein flexibler Container sein */
			display: inline-flex;

			flex-direction: column; /* Kinder spaltenweise anordnen */
			flex-direction: row; /* Kinder zeilenweise anordnen */

			align-items: center;
			justify-content: center;

			gap: 20px; /* Abstände zwischen den Achsen */
			}

			.child {
			flex-grow: 1; /* Anteiliger Platz, wenn mehr als nötig da ist */
			flex-shrink: 1; /* Anteiliger Platz, wenn weniger als nötig da ist */
			flex-basis: 20px; /* Grundlage zur Berechnung der finalen Größe */
			order: 1; /* Erlaubt die Darstellung in anderer Reihenfolge als durch das HTML vorgegeben */
			}
			</code>
			</pre>
			</section>
			<section>
			<img data-src="/assets/images/css-flexbox-axes.drawio.svg">
			</section>
			<section>
			<h3>Aufgabe</h3>
			<p>Mit CSS Flexbox rumspielen</p>
			</section>
			</section>
			</div>
			</div>