Post on 15-Dec-2014
description
CSS3-Flexbox-Modell
Responsive WebdesignNeue Möglichkeiten und Freiheiten mit dem
Peter Rozek, ecx.io germany GmbH
Peter Rozek, ecx.io germany GmbHSpeaker
Frontend Entwicklung: Gestern, Heute, Morgen
Gestern: float: left/right;
clear: both position:relative
position:absolute position: fixed
Heute: float: left/right;
display: flex;clear: both
position:relative position:absolute
position: fixed
Morgen: display: flex;
Flexbox unterstützt uns für flexible und skalierbare Layouts.
Beliebig positionieren und aneinander ausrichten
Reihenfolge verändern
ordredisplay
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 CSSEqual Height Columns
<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>
{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
<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>
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 containercontent 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: fixed
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
flex items
Properties Elternelement
!
Flexbox aktivieren
http://oneofus.net/2014/04/the-top-ten-starship-captains-of-the-small-screen/
display:
Definiert 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 11 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; }
flex-wrap
flex-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;
Leerraumverteilung
Definiert 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 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;
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-basisflex-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-flexbox/
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 Wireframes
http://support.balsamiq.com/customer/portal/articles/615901
HTML-Prototyping
Testen, testen, testen…
Produktion
Responsive Workflow
https://twitter.com/zeldman/statuses/268066054452953088
Kann Flexbox heute schon eingesetzt werden?
Ja
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/flexbox
* benötigt Vendor-Präfix
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
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
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
http://developer.android.com/about/dashboards/index.html
Verbreitung Android
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-flex-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 „meinflexbox“ wird beim html Start-Tag ergänzt.
Pollyfill
Flexie ist ein JavaScript Polyfill für die Flexbox, berücksichtigt aber den alten Standard.
Flexie
http://flexiejs.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: peter.rozek@ecx.io E-Mail: hello@peter-rozek.de Demos: https://github.com/webinterface/Flexbox