UX Abo

Neuer Workshop: "UX Metrics - Erfolgsmessung im UX Design".

Zeigt her!
Close

CSS3 Flexbox

14. März 2013, von Sarah
Bild
Liechtenecker Büro
Bild
css_flexbox_kreis

Wer kennt das nicht: ewiges Herumprobieren und Tweaken beim Positionieren von HTML Blöcken und zwar so, dass das ganze auch noch sinnvoll für mobile Geräte dargestellt wird.
Das kann manchmal ziemlich schrecklich sein und oft denkt man sich: “Warum muss diese Kleinigkeit jetzt eigentlich so schwer sein, dass ein Element zentriert dargestellt wird?” Auf den ersten Frust folgt danach das große Googeln und das Finden von irgendwelchen zwielichtigen CSS Hacks, die dann aber dummerweise nicht in allen Browsern funktionieren. Da bleiben oft nur zwei Optionen: CSS Hacks für die CSS Hacks zu suchen oder alles umzustellen und neu zu machen. Und am Ende klappt es dann endlich – verhält sich aber nicht wie gewünscht am Smartphone…

Dies ist einer der Gründe warum wir uns schon sehr auf vollen Browsersupport von Flexbox (CSS Flexible Box Layout Module) freuen.
Für alle die nichts mit dem Begriff anfangen können (ich sags euch, ihr werdet begeistert sein!):
Eigentlich wird hier schon lange herumgebastelt und spezifiziert, aber erst seit Anfang dieses Jahres habe ich den Hype um Flexbox mitbekommen.
Flexbox ist eine Alternative zum Block Model, das es erlaubt, Elemente in einer gewünschten Reihenfolge und Ausrichtung zu positionieren. Ein großer wichtiger und wahrscheinlich ungewohnter Unterschied ist, dass Flexbox keine floats kennt/braucht. Da es sich nur um CSS handelt wird der HTML Code nicht verändert, sondern nur das Aussehen (wichtig für SEO und Accessibility). Das ist natürlich noch nicht alles, aber für genauere Informationen lest ihr am besten an den unten angeführten Links weiter.
Das Layout befindet sich gerade noch in der “Recommendation stage” und wird noch sehr wenig unterstützt. Für Webkit muss mit -webkit geprefixed werden, Gecko braucht dies nicht, allerdings werden hier noch nicht alle Eigenschaften unterstützt. Der IE10 sowie Safari unterstützen eine alte Version der Spezifikation (Alte Flexbox vs Neue Flexbox http://css-tricks.com/old-flexbox-and-new-flexbox/).
Wenn ihr tiefer in das Thema eintauchen wollt (und glaubt mir, das wollt ihr 😉 ) empfehle ich diese Artikel:
W3C Editor’s Draft
Mozilla Developer Network
Artikel im teamtreehouse Blog
Außerdem kann hier mit Flexbox gespielt werden:
Flexyboxes
CSS Flexbox Please!

Du willst mit jemanden über das Thema plaudern?

Einen kostenlosen Termin mit CEO Susanne vereinbaren!

Sarah

Meine Rolle bei Liechtenecker: - Wenn es weder IT noch Digitalisierung gäbe, wäre mein Beruf: - Mein Herz schlägt für: -

Interesse mit uns zu arbeiten?

Lass uns plaudern …

oder vereinbare gleich mit unserer CEO Susanne einen kostenlosen Termin.