Generate Flex Elements.

Generate Flexbox elements for your projects or use ready-made templates

Learn more

Flexbox Generator

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

How to use it?

1. Download Flexbox Styles

2. Create a flexbox with the desired settings

3. Copy the generated code and paste it into the project

Docs

Enable flex behaviors

Direction

Justify content

Align items

Align self (affects only Item 1)

Auto margins (affects only Item 1)


Templates

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3