CSS Flexbox Cheat Sheet

Flex Container Properties

display: flex;

1
2
3
.container {
    display: flex;
}

justify-content

1
2
3
.container {
    justify-content: space-between;
    /* Other values: flex-start, flex-end, center, 
       space-around, space-evenly */
}

align-items

1
2
3
.container {
    align-items: center;
    /* Other values: flex-start, flex-end, 
       stretch, baseline */
}

flex-direction

1
2
3
.container {
    flex-direction: column;
    /* Other values: row, row-reverse, 
       column-reverse */
}

flex-wrap

1
2
3
4
5
6
.container {
    flex-wrap: wrap;
    /* Other values: nowrap, wrap-reverse */
}

Flex Item Properties

Property Values Description
flex-grow number (default: 0) How much item grows relative to siblings
flex-shrink number (default: 1) How much item shrinks relative to siblings
flex-basis length, auto Initial main size of flex item
flex grow shrink basis Shorthand for grow, shrink, and basis
align-self auto, flex-start, center... Override align-items for specific item