Archiv

Layouten mit Gridlayout und mit Flexbox im Vergleich

Lange Zeit hatten wir keine vernünftige Layouttechnik – und jetzt haben wir gleich zwei: Flexbox und Gridlayout. Gridlayout ist mächtiger, das ist klar. Brauchen wir damit überhaupt noch Flexbox? Diese Frage beantwortet man am besten an praktischen Beispielen – hier zeige ich ein Sticky-Footer-Layout, das dann erweitert wird, und führe vor, wie man das Layout in seinen Variationen jeweils mit Gridlayout und mit Flexbox umsetzt. Weiterlesen

justify-content: space-evenly bei Flexbox und Gridlayout

Durch justify-content: space-around wird bei Flexbox und Gridlayout der Leerraum zwischen den Items und am Anfang und Ende ergänzt. Zwischen den Items ist der Leerraum jedoch doppelt so groß wie am Anfang und am Ende. Manchmal hätte man es aber auch alle Abstände gleich – also space-evenly. Das funktioniert bei Gridlayout, allerdings nicht bei Flexbox, aber bei Flexbox erreicht man das gewünschte Verhalten durch etwas Trickserei …

Weiterlesen

Flexbox – Verwirrendes bei der flex-Kurzschreibweise

Die Kurzschreibweise flex bestimmt die flexiblen Ausmaße von Flexboxen und ist eine verkürzte Schreibweise für drei Angaben. Soweit so klar. Was aber weniger bekannt ist: Wenn man bei flex die Angabe für flew-grow oder  flex-basis weglässt, werden andere Werte genommen als die Ausgangswerte der beiden Eigenschaften. Das ist ungewöhnlich. Aber noch mal ganz von vorne.

Weiterlesen

Flexbox: Elemente intelligent ausblenden mit visibility: collapse

Bei Flexbox passen sich die Elemente aneinander an – aber was ist, wenn Elemente temporär ausgeblendet werden … und die umgebenden Elemente sich trotzdem daran anpassen sollen? In diesem Fall hilft visibility: collapse.

Weiterlesen

Flexbox: Zentrieren per margin und per justify-content/align-items

Bei der Verwendung von Flexbox gibt es bekanntlicherweise zwei Arten, Elemente zu zentrieren. Man kann margin beim zu zentrierenden Element einsetzen oder mit justify-content/align-items hantieren. Bisher dachte ich, dass beide sich nur in der Browserunterstützung unterscheiden, aber es gibt einen anderen wesentlichen Unterschied zwischen beiden – der sich zeigt, wenn der Viewport kleiner ist als das zu zentrierende Element.

Weiterlesen

Funktionsweise von display: inline-flex

Zur Aktivierung der Flexbox-Darstellung nimmt man display: flex oder display: inline-flex. Was von beiden man wählt, hat keine Auswirkung auf die Darstellung des Flexitems, sondern darauf, wie sich der Flexcontainer zu den umgebenden Elementen verhält. Mit display: flex verhält sich der Flexcontainer im Wesentlichen wie ein Blockelement, hingegen mit display:inline-flex eher wie ein Inline-Element.

Weiterlesen

Zentrieren mit Flexbox – verschiedene Möglichkeiten

Zentrieren mit Flexbox

Mit dem neuen CSS3-Layoutmodul Flexbox lassen sich Elemente einfach zentrieren. Allerdings gibt es dafür unterschiedliche Ansätze: Entweder man verwendet zur Zentrierung die Eigenschaften align-items:center und justify-content: center oder aber man setzt dafür auf die altbekannte Eigenschaft margin.
Weiterlesen