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

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

description

 

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

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

CSS3-Flexbox-Modell

Responsive WebdesignNeue Möglichkeiten und Freiheiten mit dem

Peter Rozek, ecx.io germany GmbH

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

Peter Rozek, ecx.io germany GmbHSpeaker

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

Frontend Entwicklung: Gestern, Heute, Morgen

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

Gestern: float: left/right;

clear: both position:relative

position:absolute position: fixed

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

Heute: float: left/right;

display: flex;clear: both

position:relative position:absolute

position: fixed

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

Morgen: display: flex;

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

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

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

Beliebig positionieren und aneinander ausrichten

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

Reihenfolge verändern

ordredisplay

Ohne das HTML-Dokument anzupassen

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

Vertical Alignment

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

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

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

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

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

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

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

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

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

Beispiel mit CSSEqual Height Columns

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

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

<html>

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

{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; }

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

mit CSS und pseudo Selektor

Equal Height Columns

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

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

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

http://brm.io/jquery-match-height/

mit jQuery matchHeight.js*

Equal Height Columns

* matchHeight.js kann auch Responsive

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

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

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

<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

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

{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; }

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

mit Flexbox einfach smarter

Equal Height Columns

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

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

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

display: flex;Das ist alles!

{css}

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

<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 containercontent und sidebar = flex items

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

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

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

clear: both position:relative

position:absolute position: fixed

Das hier ist nicht mehr notwendig:

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

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.

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

Terminologie

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

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)

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

Aufbau Flex Container

main axis

main start main end

cross axis

cross start

cross end

flex items

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

Properties Elternelement

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

!

Flexbox aktivieren

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

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

display:

Definiert das Element als Flex-Container. Elemente darin werden zu Flex-items.

flex inline-flex

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

flex-direction:

Steuert die Reihenfolge der Element in einer Flexbox.

row row-reverse column column-reverse

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

flex-direction: row;

4 3 2 11 2 3 4

4

3

2

1

1

2

3

4

flex-direction: row-reverse;

flex-direction: column; flex-direction: column-reverse;

Syntax:

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

Mehrzeilige Anordnung

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

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

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

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

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

Die Kurzschreibweise flex-flow fasst die Eigenschaften flex-direction und flex-wrap zusammen.

syntax aus: „flex-direction“ „flex-wrap“flex-flow

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

.flexitem { flex-flow: row nowrap; }

flex-wrap

flex-direction

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

Vertikale Ausrichtung von HTML-Elementen innerhalb der Flexbox.

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

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

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

align-items: center; align-items: stretch;

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

http://philipwalton.github.io/solved-by-flexbox/

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

Leerraumverteilung

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

Definiert Ausrichtung und Abstand auf der horizontalen.

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

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

Syntax:

justify-content: flex-end;

justify-content: flex-start;

justify-content: center;

justify-content: space-between;

justify-content: space-around;

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

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

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

Syntax:

align-content: flex-start;

1 2

3 4

5 61 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;

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

Properties Kindelemente

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

Die Kurzschreibweise flex fasst die Eigenschaften flex-grow, flex-shrink und flex-basis zusammen.

syntax aus: „flex-grow“ „flex-shrink“ „flex-basis“flex

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

.flexitem { flex: 1 1 100px; }

flex-shrink

flex-basisflex-grow

Eigenschaft flex gibt den Flex-items flexible Ausmaße mit.

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

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

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

.flexitem { order: 1; }

Eigenschaft order ändert die Reihenfolge im HTML-Dokument.

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

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

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

http://philipwalton.github.io/solved-by-flexbox/

Flexbox Spielwiese

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

Im Responsive Webdesign spielt Flexbox seine stärken aus.

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

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

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

{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:

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

{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; } }

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

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

Responsive:

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

Flexbox adressiert Multiscreen Experience

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

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

Ridley Marx

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

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

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

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

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

Kern des Internets:

• Transformation • Informations Experience • Accessibility

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

Responsive Webdesign Workflow und Flexbox

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

Konzeption: Mobile und. Content First

Development: Progressive Enhancement

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

Graceful degradation

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

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

Content Strategy

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

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

Content Wireframes

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

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

Content erstellen

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

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

Moodboard / Style Tile

Bilder von: http://styletil.es/

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

HTML-Prototyping

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

Testen, testen, testen…

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

Produktion

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

Responsive Workflow

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

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

Kann Flexbox heute schon eingesetzt werden?

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

Ja

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

Coole und smarte Layouts für aktuelle Browser entwickeln.

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

An Fallback Lösungen denken.

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

Browsersupport

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

11.0 29.0 35.0 7.0* 21.0

Supported teilweise Supported nicht Supported

Browsersupport Desktop

http://caniuse.com/flexbox

* benötigt Vendor-Präfix

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

11.028.0 34.0

7.0*20.010.0*

27.0 33.06.1*

19.09.026.0 32.0

6.0*18.08.0

24.0 31.05.1*

17.0

Supported teilweise Supported nicht Supported

29.0 35.0 21.0

http://caniuse.com/flexbox

* benötigt Vendor-Präfix

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

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äfix

iOS Mini Mobile Andriod Andriod

http://caniuse.com/flexbox

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

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.15.0-5.1* 4.1*12.04.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/flexbox

21.0

* benötigt Vendor-Präfix

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

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

Verbreitung Android

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

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

Verbreitung iOS

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

Vendor-Präfix für altere Browser

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

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

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

SCSS macht es Dir einfach

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

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

{scss}

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

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

sass-flex-mixin

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

Modernizr und Flexbox

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

{css}

.no-flexboxlegacy .no-flexbox

.selektor { /* Angaben wenn keine Flexbox Eigenschaften unterstützt werden. */ }

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

{JS}

<script> Modernizr.addTest(’ meinflexbox ‘, function(){ return Modernizr.testAllProps (’ eigenschaft ’); }); </script>

Text ob bestimmte Eigenschaften unterstützt werden. Die Klasse „meinflexbox“ wird beim html Start-Tag ergänzt.

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

Pollyfill

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

Flexie ist ein JavaScript Polyfill für die Flexbox, berücksichtigt aber den alten Standard.

Flexie

http://flexiejs.com/

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

Mach es (anders)

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

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.

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

Hab Mut zum Experimentieren

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

Flexbox wird kommen

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

Danke, Merci, Thanks

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

Für meine Ellen

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

Fragen ?

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