CSS Flexbox Generator
1
2
3
4
5
6
Max Width
Max Height
Flex Direction
Flex Wrap
Justify Content
Align Items
Align Content
Flex Grow item 1
Flex Shrink item 1
Flex Grow item 2
Flex Shrink item 2
Flex Grow item 3
Flex Shrink item 3
Flex Grow item 4
Flex Shrink item 4
Flex Grow item 5
Flex Shrink item 5
Flex Grow item 6
Flex Shrink item 6
Flex Grow for all items
UiRockStar CSS FlexBox Generator is a free online tool to help you create and export CSS code for a custom page layout made using CSS FlexBox.

How does flexbox layout works?

Flexbox layout is all about the relation between a parent container and his direct child items.

The parent container is called a flex container and the child items are named flex items.

Flex Container

To set an element as a flex container, we use the display property with a value of flex like this :

#my-container {
	display:flex;
}

Also, it's possible to use inline-flex.

#my-container {
	display:inline-flex;
}