Flexbox Demo

Properties for the Parent

Layout children

Add children to the parent container and change its properties using the switches below to see the flexbox layout in action.

[$index + 1]

Next Child

[numOfChildren + 1]
Operations with children
Layout Direction
flex-direction
Wrap Behavior
flex-wrap
Alignment in Layout Direction
([if(flexDirection = "row" or flexDirection = "row-reverse", "horizontal", "vertical")])
justify-content
Alignment in Perpendicular Direction
([if(flexDirection = "row" or flexDirection = "row-reverse", "vertical", "horizontal")])
align-items
Content Alignment
align-content

Property “align-content” has no effect when there is only one line of flex items.

Content Alignment
align-content

Generated Code

.parent {

display: flex;
flex-direction: [flexDirection];
flex-wrap: [flexWrap];
justify-content: [justifyContent];
align-items: [alignItems];
align-content: [alignContent];

}

Properties for the Children

Flex with Order

Move the slider to explore how the “order” property can change the position of “target” among the elements (in different types of layout).

Layout Direction
Order of “target”
order: -1
target
order: 1
order: 3
order: 3

Generated Code

.target {

order: [targetOrder];

}

Flex with Align-Self

Click on “target” to explore how “align-self” can change the alignment for a single element only.

1
target
3
4
5

Generated Code

.target {

align-self: [get(states, state)];

}