CSS Flexbox CheatSheet

Flex Containers: display

display: flex;
1
2
3
4
5
display: inline-flex;
1

.parent {
    display: <value>;
}

Ordering & Orientation: flex-direction

flex-direction: row;
1
2
3
4
5
flex-direction: row-reverse;
1
2
3
4
5
flex-direction: column;
1
2
3
4
flex-direction: column-reverse;
1
2
3
4

.parent {
    display: flex;
    flex-direction: <value>;
    height: 210px;
}

Ordering & Orientation: flex-wrap

flex-wrap: nowrap;
1
2
3
4
flex-wrap: wrap;
1
2
3
4
flex-wrap: wrap-reverse;
1
2
3
4

.parent {
    display: flex;
    align-items: flex-start;
    flex-wrap: <value>;
    height: 210px;
}
.child {
    width: 40%;
}

Ordering & Orientation: flex-flow

flex-flow: row nowrap;
1
2
3
4
flex-flow: column-reverse;
1
2
3
4
flex-flow: column wrap;
1
2
3
4
flex-flow: row-reverse wrap-reverse;
1
2
3
4

 .parent {
    display: flex;
    flex-flow: <value>;
    height: 210px;
}      
.child {
    width: 40%;
    height: 40%;
}

Ordering & Orientation: order

order: -1;
1
2
3
4
order: 0;
1
2
3
4
order: 1;
1
2
3
4

.parent {
    display: flex;
    height: 210px;
}
.child--featured {
    order: <value>;
}

Aligment: justify-content

justify-content: flex-start;
1
2
3
4
justify-content: flex-end;
1
2
3
4
justify-content: center;
1
2
3
4
justify-content: space-between;
1
2
3
4
justify-content: space-around;
1
2
3
4
justify-content: space-evenly;
1
2
3
4

.parent {
    display: flex;
    justify-content: <value>;
    height: 210px;
}

Aligment: align-items

align-items: stretch;
1
2
2
3
2
1
4
align-items: flex-start;
1
2
2
3
2
1
4
align-items: flex-end;
1
2
2
3
2
1
4
align-items: center;
1
2
2
3
2
1
4
align-items: baseline;
1
2
2
3
2
1
4
align-items: auto;
1
2
2
3
2
1
4

.parent {
    display: flex;
    align-items: <value>;
    height: 210px;
}

Aligment: align-self

align-self: auto;
1
2
3
4
align-self: stretch;
1
2
3
4
align-self: flex-start;
1
2
3
4
align-self: flex-end;
1
2
3
4
align-self: center;
1
2
3
4
align-self: baseline;
1
2
3
4

.parent {
    display: flex;
    height: 210px;
}    
.child--featured {
    align-self: <value>;
}

Aligment: align-content

align-content: flex-start;
1
2
3
4
align-content: flex-end;
1
2
3
4
align-content: center;
1
2
3
4
align-content: space-between;
1
2
3
4
align-content: space-around;
1
2
3
4
align-content: stretch;
1
2
3
4

.parent {
    display: flex;
    flex-wrap: wrap;
    align-content: <value>;
    height: 210px;
}
.child {
    width: 40%;
}

Flexibility: flex-grow

flex-grow: 0;
1
2
3
4
flex-grow: 1;
1
2
3
4

.parent {
    display: flex;
    height: 210px;
}
.child--featured {
    flex-grow: <value>;
}

Flexibility: flex-shrink

flex-shrink: 0;
1
2
3
4
flex-shrink: 1;
1
2
3
4

.parent {
    display: flex;
    height: 210px;
}
.child {
    width: 45%;
}    
.child--featured {
    flex-shrink: <value>;
}

Flexibility: flex-basis

flex-basis: 30%;
1
2
3
4
flex-basis: 50%;
1
2
3
4
flex-basis: content;
1
2
3
4
flex-basis: auto;
1
2
3
4

.parent {
    display: flex;
    flex-wrap: wrap;
    height: 210px;
}
.child--featured {
    flex-basis: <value>;
}