Webthemen
Geschrieben am: 22.2.2017
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.
Geschrieben am: 17.2.2017, aktualisiert: 16.3.2022
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?
Geschrieben am: 11.11.2016
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.
Geschrieben am: 27.10.2016
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.
Geschrieben am: 19.10.2016
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.
Geschrieben am: 12.10.2016
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.
Geschrieben am: 20.6.2016
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.