Distributing Space Inside a Flex Container5:55 with Guil Hernandez
The justify-content property lets you control the position and alignment of flex container items on the main axis, as well as how much space is between flex items. Learn about how to manipulate flex spacing using `justify-content`, `justify-content: space-between`, and `margin: auto`.
- You apply the
justify-contentproperty to flex containers only.
justify-contentproperty lets you control the position and alignment of flex Items on the main axis and how space should be distributed in a flex container.
- The default value for
flex-start, which places items towards the start of each flex line.
- To place items at the end of the flex line, set
- The value
centerplaces flex items in the center of the line, with equal amounts of empty space between the line's start edge and the first item, and between the end edge and the last item.
- The value
space-betweendisplays equal spacing between flex items.
- For equal spacing around every flex item, use the value
- A margin set to
autowill absorb any extra space around a flex item and push other flex items into different positions.
You need to sign up for Treehouse in order to download course files.Sign up