One of the main benefits of the flexbox is determining how space is dispersed between multiple items. The justify-content property manages the alignment of your flex items along the main axis, bunching them all toward the side, the center, or evenly spacing them out.
| justify-content | |
|---|---|
| flex-start (default) moved toward the start of the container |
Item 1
Item 2
Item 3
|
| flex-end moved toward the end of the container |
Item 1
Item 2
Item 3
|
| center moved toward the center of the container |
Item 1
Item 2
Item 3
|
| space-between first and last item moved to the edges of the container, with even amounts of space between the remaining items |
Item 1
Item 2
Item 3
|
| space-around adds an even amount of space on either side of every item in the container |
Item 1
Item 2
Item 3
|
Note that applying "margin:auto" to a flex item will override the justify-content mode for that individual item. Using margin:auto will automatically center the item in the space available—horizontally and vertically. Setting auto to only one direction (like margin-right:auto) will automatically fill all of the available space on that side of the item with the margin.
| auto margins | |
|---|---|
| margin:auto an even amount of margin on all sides |
Item 1
Item 2
Item 3
|
| margin-left:auto; margin-right:auto an even amount of margin on the left and right sides |
Item 1
Item 2
Item 3
|
| margin-top:auto; margin-bottom:auto an even amount of margin on the top and bottom sides |
Item 1
Item 2
Item 3
|
| margin-left:auto an even amount of margin on the left of each item |
Item 1
Item 2
Item 3
|
| margin-right:auto an even amount of margin on the right of each item |
Item 1
Item 2
Item 3
|
