Slide 1
Slide 1 text
Flexbox
Slide 2
Slide 2 text
Imagine that the gods are playing some
great game. Let's say a chess game. And you
don't know the rules of the game, but you're
allowed to look at the board from time to
time, in a little corner, perhaps. And from
these observations, you try to figure out
what the rules of the game are.
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
container
a thing with things in
item
a thing in a thing
Slide 9
Slide 9 text
Container
Any element with the css property
display: flex
Has the default properties
flex-direction: row
flex-wrap: nowrap
flex-flow: row nowrap
Its contents can be positioned and
aligned using the properties
align-items: stretch
align-content: stretch
justify-content: flex-start
(these are defaults too)
CROSS
MAIN
Slide 10
Slide 10 text
Item
Any element that is the direct
descendant of a flex container. It
inherits the shorthand property
flex: 0 1 auto
Has the default properties
flex-grow: 0
flex-shrink: 1
flex-basis: auto
order: 0
Its position and alignment can be
controlled using the properties
align-self: auto
margin: 0
CROSS
MAIN
Slide 11
Slide 11 text
Viewport
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
Column
Slide 14
Slide 14 text
Row
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
flex-wrap
arrangement sizing
justify-content
align-items
flex-shrink
align-content
flex-direction
flex-basis
flex-flow
flex-grow
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
Flex V1: http://codepen.io/lukejacksonn/pen/3cbf640aab14159ad9ccdf5bbb26f1e9
Flexy Google : http://codepen.io/lukejacksonn/pen/zvbPGb
Hero Flex List: http://codepen.io/lukejacksonn/pen/MwKOKR
Flex Fix: http://codepen.io/lukejacksonn/pen/dozqVq
Flex Gallery: http://codepen.io/lukejacksonn/pen/jbbdgb
Oriental Nav: http://codepen.io/lukejacksonn/pen/zGmpxK
Carousel: http://codepen.io/lukejacksonn/pen/xwbBXe
Masthead: http://codepen.io/lukejacksonn/pen/avzzbv
Contact Form: http://codepen.io/lukejacksonn/pen/avGBeP
Slide 19
Slide 19 text
No content