nicht angemeldet
Flexbox: align-items:stretch funktioniert nicht
0 0 
Matthias Scharwies
0 
Rolf B
Flexbox: align-items:stretch funktioniert nicht
Hallo Allerseits
Auf meiner Homepage verwende ich Flexbox um die einzelnen Beiträge nebeneinander darzustellen. Dabei möchte ich, dass alle Beiträge genau gleich hoch sind. Dazu ist wohl align-items:stretch gedacht. Nur will dies bei mir einfach nicht funktionieren. Kann mir jemand helfen?
Grundsätzlich scheint die Flexbox korrekt zu funktionieren. Die Spaltenbreiten tun genau was sie sollen. Die vertikale Ausrichtung flex-start, flex-end und center funktionieren auch. Nur eben stretch funktioniert nicht.
Damit die Homepage trotzdem anständig aussieht, habe ich mittels min-height alle Beiträge gleich hoch eingestellt. Dies ist aber nur eine Notlösung. Wenn der Inhalt ändert, muss ich jeweils das CSS wieder anpassen. Align-items:stretch wäre die Lösung, wenn es dann funtionieren würde.
Danke für Eure Tipp Stefan
-
Hier liegt offensichtlich ein Verständnisproblem vor.
stretch ist der Standardwert, deshalb muss er nicht extra zugewiesen werden.
Dadurch werden alle Boxen, die sich aktuell in einer Reihe befinden, auf die gleiche Höhe gebracht, abhängig von der höchsten. Nicht jedoch alle Boxen innerhalb eines Containers.
Das ist auch sinnvoller, dein Wunsch ist eher eine Ausnahme. Dazu solltest du dich mit CSS-Grid (display: grid;) beschäftigen.
-
Servus!
Hallo Allerseits
Auf meiner Homepage verwende ich Flexbox um die einzelnen Beiträge nebeneinander darzustellen. Dabei möchte ich, dass alle Beiträge genau gleich hoch sind.
Das heißt in der Webentwickler-Welt Holy-Grail-Layout. Hier ist eine Umsetzung mit CSS-Grid.
Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“ -
Hallo Stefan281,
deine Flex-Items sind gleich hoch, gib den divs mal einen Rand. Dann siehst Du das.
Problem sind deine article-Elemente, die in den divs stecken. Die sind nicht auf height:100% gesetzt und deshalb scheint es so, als wären die Boxen unterschiedlich. Das ist das, was MrMurphy mit
Nicht jedoch alle Boxen innerhalb eines Containers.
meint.
Das ist bei deinem Mörder-Stylesheet nur schwierig aufzuspüren...
Rolf
--
sumpsi - posui - obstruxi