Vorlage:Infobar/style.css: Unterschied zwischen den Versionen

Vorlage:Infobar/style.css (Quelltext anzeigen)

218 Bytes hinzugefügt , 3 April

Ziemlich finsteres CSS für optimales Layout

20.745

Bearbeitungen

@@ Zeile 23: / Zeile 23: @@
 .infobar-text {
-     display: grid; /* Weiterhin Grid verwenden */
+     display: flex; /* Flexbox */
-     align-items: center; /* Sorgt für die vertikale Zentrierung der Inhalte */
+    flex-wrap: wrap; /* Erlaubt Elementen, in die nächste Zeile zu gehen, wenn nicht genug Platz vorhanden ist */
-     row-gap: 0.4em; /* Definiert den Abstand zwischen den Zeilen */
+     align-items: center; /* Zentriert die Elemente vertikal */
+     gap: 0.4em; /* Definiert sowohl den row-gap als auch den column-gap für die Flexbox */
      width: 100%;
      padding: 0;
-     margin: 0; /* Keine automatische horizontale Zentrierung */
+     margin: 0;
-     color: inherit; /* Erbt die Textfarbe vom übergeordneten Element */}
+     color: inherit;}
 .infobar-text .head {
      line-height: 1;
-     flex-basis: 100%;
+     flex: 0 0 100%; /* Sorgt dafür, dass der Kopf immer seine eigene Zeile einnimmt */
      font-size: 110%;}
@@ Zeile 43: / Zeile 44: @@
 .infobar-text .item {
+    display: inline-flex; /* Verwendet inline-flex, damit .item-Elemente nebeneinander liegen können */
+    align-items: center; /* Zentriert den Inhalt der Items vertikal */
      height: max-content;
      width: max-content;
-    display: inline-block;
      padding: 0.05em 1em;
      background-color: #fff; /* Hintergrundfarbe der Pillen-Items als Fallback */