Exemplos

Flex

.container{
    display: flex;
}
ITEM 1
ITEM 2
ITEM 3
ITEM 4

Flex: única linha e excesso de conteúdo

.container{
    display: flex;
}
ITEM 1
ITEM 2
ITEM 3
ITEM 4
ITEM 5
ITEM 6
ITEM 7
ITEM 8
ITEM 9
ITEM 10

Flex-Wrap

.container{
    display: flex;
    flex-wrap: wrap;
}
ITEM 1
ITEM 2
ITEM 3
ITEM 4
ITEM 5
ITEM 6
ITEM 7
ITEM 8
ITEM 9
ITEM 10

flex-direction

.container{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}
ITEM 1
ITEM 2
ITEM 3
ITEM 4
ITEM 5
ITEM 6
ITEM 7
ITEM 8
ITEM 9
ITEM 10

flex-direction-reverse

.container{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
}
ITEM 1
ITEM 2
ITEM 3
ITEM 4
ITEM 5
ITEM 6
ITEM 7
ITEM 8
ITEM 9
ITEM 10

justify-content

.container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
ITEM 1
ITEM 2
ITEM 3
ITEM 4
ITEM 5
ITEM 6
ITEM 7
ITEM 8
ITEM 9
ITEM 10

align-items

.container{
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}
ITEM 1
ITEM 2
ITEM 3
ITEM 4
ITEM 5
ITEM 6
ITEM 7
ITEM 8
ITEM 9
ITEM 10

Propriedades para Itens (filhos)

flex-basis

.item{
    flex-basis: 10rem;
}
ITEM 1
ITEM 2
ITEM 3
ITEM 4
ITEM 5
ITEM 6
ITEM 7

flex-grow

.item{
    flex-grow: 2;
}
GROW 1
ITEM 2
ITEM 3
GROW 4
ITEM 5
ITEM 6
GROW 7

flex-shrink

.item{
    flex-shrink: 2;
    flex-basis: 5rem;
}
SHNK 1
ITEM 2
ITEM 3
SHNK 4
ITEM 5
ITEM 6
SHNK 7
ITEM 8

align-self

.item{
    align-self: flex-end;
}
ITEM 1
ALIG 2
ITEM 3
ITEM 4
ITEM 5
ITEM 6
ITEM 7
ITEM 8