The CSS flexbox (Flexible Box Layout Module) is a layout module consisting of the flex container (the parent element) and the flex elements (the elements for children).
The flex objects can be arranged as a row or as a column, and the free space available between them can be distributed in different ways.
Share this with your freinds using on twitter #CSSCheatz
## Basic Example:
1
2
3
4
5
6
7
.container {
display: flex;
}
.container > elem {
flex: 1 1 auto;
}
The Flexbox layout is optimised for small-scale layouts, whereas the Grid layout is better adapted for larger-scale layouts.
Display
1
2
3
display: flex;
display: inline-flex;
By example, all flex objects may try to fit in one section. You can adjust that, and with this property allow the products to wrap as required.
## Flex- Direction
1
2
3
4
5
6
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
## Wrap
One line
1
flex-wrap: nowrap;
Multiline
1
2
flex-wrap: wrap;
## Alignment
vertical-align to top
1
align-items: flex-start;
**vertical-align to bottom **
1
2
align-items: flex-end;
vertical-align to center
1
2
align-items: center;
To eg height
1
2
align-items: stretch;
Refer this graphic
Justify content
1
justify-content: flex-start;
1
2
3
justify-content: center;
1
2
3
justify-content: flex-end;
1
2
3
justify-content: space-between;
1
2
3
justify-content: space-around;
1
2
3
justify-content: space-evenly;
# Flex child
## simple
1
2
flex: 1 0 auto;
Flex grow,shrink.,
1
2
3
4
5
6
7
flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;
Order
1
2
3
order: 1;
order:2;
## Align self
left
1
2
3
align-self: flex-start;
right
1
2
margin-left: auto;
# Small devices layouts
Simple way that fits small sized devices best!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.container {
display: flex;
flex-direction: column;
}
.container > .header {
flex: 0 0 100px;
}
.container > .MainContent {
flex: 1 0 auto;
}
# Arrange elements in a table
1
2
3
4
5
6
7
8
.container {
display: flex;
}
.container > .box1 { flex: 1 0 20%; }
.container > .box2 { flex: 1 0 40%; }
.container > .box3 { flex: 1 0 250%; }
Centering vertically using flex
1
2
3
4
5
6
7
8
9
10
11
.container {
display: flex;
}
.container > div {
width: 100px;
height: 100px;
margin: auto;
}
For more cheatsheets like this follow me on twitter