Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-Modell

CSS3-Flexbox-Modell Responsive Webdesign Neue Möglichkeiten und Freiheiten mit dem Peter
Rozek, ecx.io germany GmbH

Peter Rozek, ecx.io germany GmbH Speaker

Frontend Entwicklung: Gestern, Heute, Morgen

Gestern: float: left/right; clear: both position:relative position:absolute position: ﬁxed

Heute: float: left/right; display: flex; clear: both position:relative position:absolute position:
ﬁxed

Morgen: display: flex;

Flexbox unterstützt uns für flexible und skalierbare Layouts.

Beliebig positionieren und aneinander ausrichten

Reihenfolge verändern ordre display Ohne das HTML-Dokument anzupassen

Vertical Alignment

Boxen lassen sich nebeneinander in Zeilen, oder untereinander in Spalten
anordnen.

Elemente lassen in der Höhe, als auch in der Breite
nach unterschiedlichsten Verhältnissen anpassen.

„Das geht doch auch mit herkömmlichen CSS.“

Für komplexere Lösungen wie z.B. “Equal Height Columns” oder “Vertical
Alignment” muss man tief in die Trickkiste greifen.

Beispiel mit CSS Equal Height Columns

{css} .content { width: 60%; float: left; background: #fff; }
.sidebar { width: 20%; float: left; } .footer { clear: both; float: none; } Ausrichtung: Design: #content, #footer, .primary, .secondary { padding: 3% 5%; } #header, #footer { background: #0e212e; color: #fff; } .secondary { background: #bbc4c9; } .primary { background: #5f6d7a; }

mit CSS und pseudo Selektor Equal Height Columns

.content { float: left; } .content, .content:before { width: 60%;
} .content:before { content: ''; position: absolute; top: 0; bottom: 0; z-index: -1; left: 0; background: #fff; } .primary, .primary:before { width: 20%; } .primary:before { content: ''; position: absolute; top: 0; bottom: 0; z-index: -1; left: 60%; background-color: #5f6673; } .secondary, .secondary:before { width: 20%; } .secondary:before { content: ''; position: absolute; top: 0; bottom: 0; z-index: -1; left: 80%; background-color: #434750; } {css} .sidebar { float: left; } .wrapper { position: relative; overflow: hidden; } .footer { clear: both; float: none; }

http://brm.io/jquery-match-height/ mit jQuery matchHeight.js* Equal Height Columns * matchHeight.js kann
auch Responsive

<!doctype html> <html lang="de"> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="jquery.matchHeight.js"></script> </head>
<html> jQuery Plugin jQuery Libary

<html> <div class="page"> <header>…</header> <div class="wrapper"> <main class="content" data-match-height=„items-a">...</main> <aside
class="sidebar primary" data-match-height=„items-a">...</aside> <aside class="sidebar secondary" data-match-height=„items-a">...</aside> </div> <footer>…</footer> </div> data Attribute

{css} .content { width: 60%; float: left; background: #fff; }
.sidebar { width: 20%; float: left; } .footer { clear: both; float: none; } Ausrichtung: Design: #content, #footer, .primary, .secondary { padding: 3% 5%; } #header, #footer { background: #0e212e; color: #fff; } .secondary { background: #bbc4c9; } .primary { background: #5f6d7a; }

mit Flexbox einfach smarter Equal Height Columns

display: flex; Das ist alles! {css}

<html> <div class="page"> <header>…</header> <div class="wrapper"> <main class="content">...</main> <aside class="sidebar
primary">...</aside> <aside class="sidebar secondary">...</aside> </div> <footer>…</footer> </div> {css} .wrapper { display: flex; } wrapper = flex container content und sidebar = flex items

Vorteil gegenüber float: Nachfolgende Elemente sind von “display: flex“ nicht
betroffen und umfließen die Flexbox nicht.

clear: both position:relative position:absolute position: ﬁxed Das hier ist nicht
mehr notwendig:

1. Floats? Die brauchen wir nicht. ! 2. Layouts, die
zuvor eine Herausforderung waren, sind nun verständlicher. ! 3. Wir können wirklich flexible Layouts erstellen und die Berechnungen macht der Browser.

Terminologie

Properties Elternelement (flex container) Properties Kindelemente display flex-direction flex-wrap flex-flow
align-items justify-content align-content order flex-grow flex-shrink flex-basis flex (flex items) (flex items) (flex items)

Aufbau Flex Container main axis main start main end cross
axis cross start cross end ﬂex items

Properties Elternelement

! Flexbox aktivieren http://oneofus.net/2014/04/the-top-ten-starship-captains-of-the-small-screen/

display: Deﬁniert das Element als Flex-Container. Elemente darin werden zu
Flex-items. flex inline-flex

flex-direction: Steuert die Reihenfolge der Element in einer Flexbox. row
row-reverse column column-reverse

flex-direction: row; 4 3 2 1 1 2 3 4
4 3 2 1 1 2 3 4 flex-direction: row-reverse; flex-direction: column; flex-direction: column-reverse; Syntax:

Mehrzeilige Anordnung

Legt fest, ob die Elemente in einem Flexbox- Container auf
einer Linie liegen, oder bei bedarf auf mehrere Zeilen verteilt werden können. flex-wrap: nowrap wrap wrap-reverse

Syntax: flex-wrap: nowrap; flex-wrap: wrap; flex-wrap: wrap-reverse; Die flexiblen Elemente
liegen alle in derselben Reihe, auch wenn dazu der Platz fehlt. Die flexiblen Elemente können sich wenn nötig innerhalb des Containers in mehrere Zeilen aufteilen (nach unten). Die flexiblen Elemente können sich wenn nötig innerhalb des Containers in mehrere Zeilen aufteilen (nach oben).

Die Kurzschreibweise flex-flow fasst die Eigenschaften flex-direction und flex-wrap zusammen.
syntax aus: „flex-direction“ „flex-wrap“ flex-flow

.flexitem { flex-flow: row nowrap; } ﬂex-wrap ﬂex-direction

Vertikale Ausrichtung von HTML-Elementen innerhalb der Flexbox. align-items: flex-start flex-end
center stretch

Syntax: align-items: flex-start; align-items: flex-end; align-items: center; align-items: stretch;

http://philipwalton.github.io/solved-by-ﬂexbox/

Leerraumverteilung

Deﬁniert Ausrichtung und Abstand auf der horizontalen. justify-content: flex-start flex-end
center space-between space-around

Syntax: justify-content: flex-end; justify-content: flex-start; justify-content: center; justify-content: space-between; justify-content:
space-around;

Legt fest, wo die Elemente in einem Flexbox- Container positioniert
sind, oder welchen Abstand sie zueinander haben. align-content: flex-start flex-end center space-between space-around stretch

Syntax: align-content: flex-start; 1 2 3 4 5 6 1
2 3 4 5 6 1 2 3 4 5 6 1 2 3 4 5 6 1 2 3 4 5 6 1 2 3 4 5 6 align-content: flex-end; align-content: center; align-content: space-between; align-content: space-around; align-content: stretch;

Properties Kindelemente

Die Kurzschreibweise flex fasst die Eigenschaften flex-grow, flex-shrink und flex-basis
zusammen. syntax aus: „flex-grow“ „flex-shrink“ „flex-basis“ flex

.flexitem { flex: 1 1 100px; } flex-shrink flex-basis flex-grow
Eigenschaft flex gibt den Flex-items flexible Ausmaße mit.

.flex-container { display: flex; } ! .main { flex: 40%
1 2; } ! .primary { flex: 20% 1 1; } ! .secondary { flex: 20% 2 1; }

.flexitem { order: 1; } Eigenschaft order ändert die Reihenfolge
im HTML-Dokument.

.flex-container { display: flex; } ! .main { order: 2;
} ! .primary { order: 1; } ! .secondary { order: 3; }

http://philipwalton.github.io/solved-by-ﬂexbox/ Flexbox Spielwiese

Im Responsive Webdesign spielt Flexbox seine stärken aus.

<html> Ausgangslage HTML: <div class=„page flex-container"> <header>…</header> <main class=„content“> <div
class=„box“> … </div> … </main> <aside class="sidebar primary">...</aside> <aside class="sidebar secondary“> <div class=„box“> … </div> … </aside> <footer>…</footer> </div>

{css} ..flex-container { display: flex; flex-flow: row wrap; } #header
{ order: 1; } .content { display: flex; flex-flow: column wrap; order: 2; } .primary { order: 4; } .secondary { display: flex; flex-flow: column reverse; order: 3; } #footer { order: 5; } Basis:

{css} Responsive: @media screen and (min-width: 48em) { .content {
display: flex; flex-flow: row wrap; width: 75%; } .content .box { padding: 0; margin: 0 1em; flex: 1 1 30%; } .primary { width: 25%; padding: 1em 4.833%; order: 3; } .secondary { flex-direction: row; justify-content: space around; padding: 3% 4%; } .secondary .box { padding: 0; margin: 0 1em; } }

{css} @media screen and (min-width: 60em) { ! .content .box
{ flex: 1 1 25%; } ! } Responsive:

Flexbox adressiert Multiscreen Experience

„Multiscreen is about developing a single application for multiple interfaces
– one for each screen type: smartphone, tablet, desktop, and television.“ Ridley Marx

John Allsopp, A dao of webdesign: http://alistapart.com/article/dao „It is the
nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all. The journey begins by letting go of control, and becoming flexible.“

Es geht nicht mehr darum, ein Design pixelgenau umzusetzen, es
geht um den Kern des Internets.

Kern des Internets: • Transformation • Informations Experience • Accessibility

Responsive Webdesign Workflow und Flexbox

Konzeption: Mobile und. Content First Development: Progressive Enhancement

Graceful degradation Bild: http://carmoderns.blogspot.nl/2012/09/monster-truck.html

Content Strategy Bild von: http://samanthatoy.com/style-tiles/

Content Wireframes http://support.balsamiq.com/customer/portal/articles/615901

Content erstellen Bild von: http://samanthatoy.com/style-tiles/

Moodboard / Style Tile Bilder von: http://styletil.es/

HTML-Prototyping

Testen, testen, testen…

Produktion

Responsive Workflow https://twitter.com/zeldman/statuses/268066054452953088

Kann Flexbox heute schon eingesetzt werden?

Coole und smarte Layouts für aktuelle Browser entwickeln.

An Fallback Lösungen denken.

Browsersupport

11.0 29.0 35.0 7.0* 21.0 Supported teilweise Supported nicht Supported
Browsersupport Desktop http://caniuse.com/ﬂexbox * benötigt Vendor-Präﬁx

11.0 28.0 34.0 7.0* 20.0 10.0* 27.0 33.0 6.1* 19.0
9.0 26.0 32.0 6.0* 18.0 8.0 24.0 31.0 5.1* 17.0 Supported teilweise Supported nicht Supported 29.0 35.0 21.0 http://caniuse.com/ﬂexbox * benötigt Vendor-Präﬁx

7.0* 5.0-7.0 4.4 10.0* 21.0 35.0 29.0 10.0* Supported teilweise
Supported nicht Supported Browsersupport Mobile * benötigt Vendor-Präﬁx iOS Mini Mobile Andriod Andriod http://caniuse.com/ﬂexbox

7.0* 5.0-7.0 4.4 10.0* 16.0 35.0 29.0 10.0* 6.0-6.1* 4.2-4.3*
7.0* 12.1 5.0-5.1* 4.1* 12.0 4.2-4.3* 4.0* 11.5 Supported teilweise Supported nicht Supported 4.0-4.1* 3.0* iOS Mini Mobile Andriod Andriod 26.0* 33.0 http://caniuse.com/ﬂexbox 21.0 * benötigt Vendor-Präﬁx

http://developer.android.com/about/dashboards/index.html Verbreitung Android

http://david-smith.org/iosversionstats/ Verbreitung iOS

Vendor-Präfix für altere Browser

.selektor { display: -webkit-box; ! display: -moz-box; ! display: -ms-flexbox;
! display: -webkit-flex; ! display: flex; ! } /* NEW: IE11, Chrome 29+, Opera 12.1+, Firefox 22+ */ /* OLD: Safari, iOS, Android browser, older WebKit browsers. */ /* NEW, Chrome 21–28, Safari 6.1+ */ /* MID: IE 10 */ /* OLD: Firefox (buggy) */ {css}

SCSS macht es Dir einfach

@mixin flexbox { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display:
-ms-flexbox; display: flex; } ! .flexbox { @include flexbox; } {scss}

https://github.com/mastastealth/sass-ﬂex-mixin sass-flex-mixin

Modernizr und Flexbox

{css} .no-flexboxlegacy .no-flexbox .selektor { /* Angaben wenn keine Flexbox
Eigenschaften unterstützt werden. */ }

{JS} <script> Modernizr.addTest(’ meinflexbox ‘, function(){ return Modernizr.testAllProps (’ eigenschaft
’); }); </script> Text ob bestimmte Eigenschaften unterstützt werden. Die Klasse „meinﬂexbox“ wird beim html Start-Tag ergänzt.

Pollyfill

Flexie ist ein JavaScript Polyﬁll für die Flexbox, berücksichtigt aber
den alten Standard. Flexie http://ﬂexiejs.com/

Mach es (anders)

Mach es anders als andere (es erwarten). Selbst wenn Deine
Aktivität in eine falsche Richtung geht, erhältst Du wertvolle Informationen daraus. Jeder Fehler ist der Beginn einer neuen Idee.

Hab Mut zum Experimentieren

Flexbox wird kommen

Danke, Merci, Thanks

Für meine Ellen

Fragen ? twitter: @webinterface E-Mail: [email protected] E-Mail: [email protected] Demos: https://github.com/webinterface/Flexbox

Responsive Webdesign: Neue Möglichkeiten und Fr...

Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-Modell

More Decks by Peter Rozek

Other Decks in Programming

Featured

Transcript