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
Example
Box 1
Box 2
Box 3
Box 4
Box 5
Box 6
Box 7
flex will get full width of its container.
Flex Inline
Example
Box 1
Box 2
Box 3
Box 4
Box 5
Box 6
Box 7
Box 8
Box 9
Box 10
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.