Flex Containers

To use flexbox you have to create flexbox container in your web page and put all elements inside container to apply flex property. flexbox uses display property with two different values.

• flex- this will generate a block level flex container
• inline-flex- this will generate an inline level flex container

Flex

flex will get full width of its container.

Flex Inline

inline-flex will not get full width of its container, it will just get some space required by element and continue to display in a single row.

Flexbox Code Generators

Try our Flexbox generators to practice and generate Flex code in real time.