What is Flexbox?
CSS Flexbox (Flexible Box Layout) is a powerful layout module that makes it easy to design flexible and responsive layout structures without using float or positioning.
Key Concepts
Container properties : Control how items are laid out within the flex containerItem properties : Control how individual items behave within the flex layoutMain axis & Cross axis : Understanding these axes is key to mastering flexbox
Try adjusting the properties in the visualizer above to see how they affect the layout!
Learn CSS Flexbox properties interactively! Use the controls below to see how different flexbox properties work in real-time.
Container Properties
flex-direction
row
row-reverse
column
column-reverse
justify-content
flex-start
flex-end
center
space-between
space-around
space-evenly
align-items
stretch
flex-start
flex-end
center
baseline
flex-wrap
nowrap
wrap
wrap-reverse
align-content
stretch
flex-start
flex-end
center
space-between
space-around
gap
0px
5px
10px
15px
20px
30px
40px
50px
Item Properties
Item 1 Properties
flex-grow: 0
flex-grow: 1
flex-grow: 2
flex-grow: 3
flex-grow: 4
flex-grow: 5
flex-shrink: 0
flex-shrink: 1
flex-shrink: 2
flex-shrink: 3
flex-shrink: 4
flex-shrink: 5
flex-basis: auto
flex-basis: 0
flex-basis: 50px
flex-basis: 100px
flex-basis: 150px
flex-basis: 200px
flex-basis: 20%
flex-basis: 30%
flex-basis: 50%
align-self: auto
align-self: flex-start
align-self: flex-end
align-self: center
align-self: stretch
align-self: baseline
Item 2 Properties
flex-grow: 0
flex-grow: 1
flex-grow: 2
flex-grow: 3
flex-grow: 4
flex-grow: 5
flex-shrink: 0
flex-shrink: 1
flex-shrink: 2
flex-shrink: 3
flex-shrink: 4
flex-shrink: 5
flex-basis: auto
flex-basis: 0
flex-basis: 50px
flex-basis: 100px
flex-basis: 150px
flex-basis: 200px
flex-basis: 20%
flex-basis: 30%
flex-basis: 50%
align-self: auto
align-self: flex-start
align-self: flex-end
align-self: center
align-self: stretch
align-self: baseline
Item 3 Properties
flex-grow: 0
flex-grow: 1
flex-grow: 2
flex-grow: 3
flex-grow: 4
flex-grow: 5
flex-shrink: 0
flex-shrink: 1
flex-shrink: 2
flex-shrink: 3
flex-shrink: 4
flex-shrink: 5
flex-basis: auto
flex-basis: 0
flex-basis: 50px
flex-basis: 100px
flex-basis: 150px
flex-basis: 200px
flex-basis: 20%
flex-basis: 30%
flex-basis: 50%
align-self: auto
align-self: flex-start
align-self: flex-end
align-self: center
align-self: stretch
align-self: baseline
Item 4 Properties
flex-grow: 0
flex-grow: 1
flex-grow: 2
flex-grow: 3
flex-grow: 4
flex-grow: 5
flex-shrink: 0
flex-shrink: 1
flex-shrink: 2
flex-shrink: 3
flex-shrink: 4
flex-shrink: 5
flex-basis: auto
flex-basis: 0
flex-basis: 50px
flex-basis: 100px
flex-basis: 150px
flex-basis: 200px
flex-basis: 20%
flex-basis: 30%
flex-basis: 50%
align-self: auto
align-self: flex-start
align-self: flex-end
align-self: center
align-self: stretch
align-self: baseline
Item 1
Item 2
Item 3
Item 4
Current Configuration Explanation