Let's talk about
Flexbox
History of Layouts
1995
1995
1996
Tables
Framesets
Floats
1998
Positioning
2004
Inline-Block
2007
Media Queries
2012
Flexbox
2016
Grid
Browser Support
The Flexmodel
Cross Axis
Main Axis
Start
End
Start
End
1
2
3
Think about the possibilities
1
2
3
Think about the possibilities
1
2
3
Think about the possibilities
1
2
3
Think about the possibilities
1
2
3
Think about the possibilities
1
CSS PROPERTIES
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.item {
width: 20%;
height: 20%;
}
CSS PROPERTIES
.container {
// requirement
display: flex;
// flow control
flex-wrap: nowrap | wrap | wrap-reverse;
flex-direction: row | column;
// item orientation on axis
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items: flex-start | flex-end | center | baseline | stretch;
// orientation for wrapped items
align-content: flex-start | flex-end | center | space-between | space-around;
}
.item {
flex: 1 1 20%;
align-self: flex-start | flex-end | center | baseline | stretch;
order: 1;
}
The Flexmodel
Cross Axis
Main Axis
Start
End
Start
End
1
2
3
DEMO
TIME
Pros
- (almost) any layout
- few properties/keywords
- Easy responsive design
- Grid-systems
- Re-ordering elements
- No hacks!
- RTL/Column flow
- Fast changes
Cons
- Wrapper
- Autoprefixing
- Browser Support
- Some IE 10/11 quirks
- Flexmodel to grasp