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

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

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

.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*
* 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">
<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>
</div>
data Attribute

mit Flexbox
einfach smarter

display: flex;
Das ist alles!
{css}

<html>
<div class="page">
</div>
</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.

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

!
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 11 2 3 4
4
3
2
1
1
2
3
4
flex-direction: row-reverse;
flex-direction: column; flex-direction: column-reverse;
Syntax:

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/

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;

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-ﬂexbox/
Flexbox Spielwiese

Im Responsive
Webdesign spielt
Flexbox seine
stärken aus.

<html>
Ausgangslage HTML:
<div class=„page flex-container">
<main class=„content“>
<div class=„box“>
…
</div>
…
</main>
<aside class="sidebar secondary“>
<div class=„box“>
…
</div>
…
</aside>
</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/

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

Kann Flexbox heute
schon eingesetzt
werden?

Coole und smarte Layouts für
aktuelle Browser entwickeln.

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.010.0*
27.0 33.0
6.1*
19.09.0
26.0 32.0
6.0*
18.08.0
24.0 31.0
5.1*
17.0
29.0 35.0 21.0

7.0* 5.0-7.0 4.4 10.0* 21.0 35.0 29.0 10.0*
Browsersupport Mobile
iOS Mini Mobile Andriod Andriod

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
4.0-4.1* 3.0*
iOS Mini Mobile Andriod Andriod
26.0*33.0
21.0

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}

@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

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

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

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.

Fragen ?
twitter: @webinterface
E-Mail: peter.rozek@ecx.io
E-Mail: hello@peter-rozek.de
Demos: https://github.com/webinterface/Flexbox

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

Weitere ähnliche Inhalte

Andere mochten auch

Mehr von Peter Rozek

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