Florence Maurice

Webthemen

CSS-Gridlayout ausrichten mit align-content, justify-content, align-items und justify-items

Ich beschäftige mich gerade genauer mit dem CSS3-Gridlayout.

Dort kann man Elemente über vier Eigenschaften ausrichten: align-content, justify-content, align-items und justify-items. Um mir besser zu merken, was genau wie wirkt, habe ich mir einen kleinen Spickzettel gebastelt.

Weiterlesen ...

Zentrieren mit Gridlayout

Natürlich ist das CSS3-Gridlayout-Modul für komplexe Layoutaufteilungen gedacht, aber manchmal braucht man ja auch banale Dinge – wie beispielsweise eine horizontale und vertikale Zentrierung.

Bei Gridlayout stehen für die Zentrierung die Angaben align-content, justify-content sowie align-items und justify-items zur Auswahl. Was aber ist genau der Unterschied zwischen diesen Angaben? Und wie zentriert man jetzt am besten beim Einsatz vom CSS3-Gridlayout?

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 ...

Reihenfolge von Elementen mit transform umkehren

Elemente mit umgekehrter Reihenfolges

Manchmal möchte man die Reihenfolge bei der Anzeige von Elementen abändern. Dafür gibt es mehrere Möglichkeiten – und ganz raffiniert fand ich, dass man dafür auch `transform` nutzen kann.

transform ist praktisch, wenn man die Reihenfolge der Elemente exakt umkehren möchte, so dass das Element, das im Quellcode zuletzt steht, am Anfang angezeigt wird etc.

Weiterlesen ...