CSS3 Flexbox Playground

Children Width

width: {{children_width}}%

Parent Flex Properties – flex container

flex-direction row row-reverse column column-reverse
flex-wrap nowrap wrap wrap-reverse
justify-content flex-start flex-end center space-between space-around
align-items stretch flex-start flex-end center baseline
align-content stretch flex-start flex-end center space-between space-around
* The default property values are highlighed.

Children Flex Properties – flex items

The children flex properties can be applied at child level, separate for each child. See the results section and change some of their properties. Hover with the mouse pointer or touch the fields to see the property name.

Result

Add child

{{$index + 1}} ✖
order flex-grow flex-shrink flex-basis align-self {{value}}