1995
1995
1996
Tables
Framesets
Floats
1998
Positioning
2004
Inline-Block
2007
Media Queries
2012
Flexbox
2016
Grid
Cross Axis
Main Axis
Start
End
Start
End
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.item {
width: 20%;
height: 20%;
}
.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;
}
Cross Axis
Main Axis
Start
End
Start
End
1
2
3