add css units and css flexbox

Sascha Schulz

2023-09-12 1a7461cf95b89d5e6ec1f17b4a12004e08d31f4c

 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>