Properties for the container
display: flex | inline-flex
#container {
display: flex;
} TODO: Demo for display: flex
#container {
display: inline-flex;
} TODO: Demo for display: inline-flex
flex-direction: column | row | column-reverse | row-reverse
{
display: flex;
flex-direction: row;
} item 1
item 2
item 3
{
display: flex;
flex-direction: column;
} item 1
item 2
item 3
{
display: flex;
flex-direction: row-reverse;
} item 1
item 2
item 3
{
display: flex;
flex-direction: column-reverse;
} item 1
item 2
item 3
flex-wrap
nowrap | wrap | wrap-reverse
{
display: flex;
flex-wrap: nowrap;
} long item 1
long item 2
very long item 3
very long long long item 4
as long as possible item 5
{
display: flex;
flex-wrap: wrap;
} long item 1
long item 2
very long item 3
very long long long item 4
as long as possible item 5
{
display: flex;
flex-wrap: wrap-reverse;
} long item 1
long item 2
very long item 3
very long long long item 4
as long as possible item 5
flex-flow
{column | row | column-reverse | row-reverse} x {nowrap | wrap | wrap-reverse}
flex-flow ist eine Abkürzung für flex-direction und flex-wrap
{
display: flex;
flex-flow: column wrap;
} long item 1
long item 2
very long item 3
very long long long item 4
as long as possible item 5
justify-content
flex-start | flex-end | center | space-between | space-around | space-evenly
{
display: flex;
justify-content: flex-start;
} item 1
item 2
item 3
{
display: flex;
justify-content: flex-end;
} item 1
item 2
item 3
{
display: flex;
justify-content: center;
} item 1
item 2
item 3
{
display: flex;
justify-content: space-between;
} item 1
item 2
item 3
{
display: flex;
justify-content: space-around;
} item 1
item 2
item 3
{
display: flex;
justify-content: space-evenly;
} item 1
item 2
item 3
Weitere Werten: start | end | left | right
align-item
flex-start | flex-end | center | stretch | baseline
align-content
flex-start | flex-end | center | stretch | space-between | space-around