From 86d5889861ff7b107312d0b8f67118b035ea5d75 Mon Sep 17 00:00:00 2001
From: Sascha Schulz <sschulz@dh-software.de>
Date: Di, 12 Sep 2023 17:26:42 +0200
Subject: [PATCH] Merge branch 'draft'

---
 index.html |   63 +++++++++++++++++++++++++++++++
 1 files changed, 63 insertions(+), 0 deletions(-)

diff --git a/index.html b/index.html
index 5173b86..98cd018 100644
--- a/index.html
+++ b/index.html
@@ -2903,6 +2903,14 @@
 						</ul>
 					</section>
 					<section>
+						<p>none</p>
+						<img data-src="/assets/images/css-display-none.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>

--
Gitblit v1.9.3