< css tutorials

CSS Flex Generator Diagrams Updated: August 17, 2018 / Share with others! Tweet It | CSS Visual Dictionary

Flex is an element scaling system designed for developing responsive content areas.

Flex consists of working with two types of elements: main container and items nested within it.

Below is an actual rendering of an HTML element with display: flex applied:

Number of Items: 1 2 3 4 5 6 7 8 9 10 25 50     Item Width: 20px 50px 100px 100%

justify-content: flex-start flex-end center space-between space-around stretch space-evenly

1
2
3
4
5
display: flex; width: 800px

Source Code Copied to clipboard.