Justify Content Classes

Bellow is a Demonstration of How the QuickCSS Justify Content Classes Work

justify-content: flex-start (default)
Items are packed toward the start of the flex-direction
1
2
3
justify-content: flex-end
Items are packed toward the end of the flex-direction
1
2
3
justify-content: center
Items are centered along the line
1
2
3
justify-content: space-between
Items are evenly distributed; first item at start, last at end
1
2
3
justify-content: space-around
Items evenly distributed with equal space around them
1
2
3
justify-content: space-evenly
Items evenly distributed with equal space between and around
1
2
3
Practical Example: Navigation Bars
Different justify-content values applied to navigation layouts
Home
Products
About
Contact
Left-aligned navigation (justify-start)
Home
Products
About
Contact
Centered navigation (justify-center)
Logo
Login
Register
Space-between for header layout (justify-between)
Important Notes: