justify-content
Definition
The justify-content property is used to align and distribute flex items along the main axis of a flex container. The main axis is the axis along which flex items are arranged in a flex container, and is determined by the flex-direction property. The justify-content property has no effect on single-line flex containers, as there is no free space to distribute.
Examples
This example centers the flex items in a flex container along the main axis. The justify-content property is set to center, which means the flex items will be centered in the available space along the main axis:
.container {
display: flex;
justify-content: center;
}
This example evenly spaces out the flex items in a flex container along the main axis. The justify-content property is set to space-between, which means the first flex item will be at the start of the container, the last flex item will be at the end of the container, and the remaining flex items will be evenly distributed in the available space:
.container {
display: flex;
justify-content: space-between;
}
This example justifies the flex items to the end of a flex container along the main axis. The justify-content property is set to flex-end, which means the flex items will be aligned to the end of the container along the main axis:
.container {
display: flex;
justify-content: flex-end;
}
Values
| Value | Description |
|---|---|
flex-start | Aligns flex items to the start of the container along the main axis. This is the default value. |
flex-end | Aligns flex items to the end of the container along the main axis. |
center | Centers flex items in the container along the main axis. |
space-between | Distributes flex items evenly in the container along the main axis. The first flex item is at the start of the container, the last flex item is at the end of the container, and the remaining flex items are evenly distributed in the available space. |
space-around | Distributes flex items evenly in the container along the main axis. The space between each pair of adjacent flex items is the same, and the space between the first/last flex items and the container edge is half the size of the space between adjacent items. |
space-evenly | Distributes flex items evenly in the container along the main axis. The space between each pair of adjacent flex items, as well as the space between the first/last flex items and the container edge, is the same. |
Best Practices
- Use justify-content to align and distribute flex items along the main axis of a flex container. This can help you achieve the desired layout and positioning of your flex items.
- Choose the appropriate value for justify-content based on the layout and design of your page.
- Avoid setting fixed widths or heights for flex items, as this can interfere with the distribution of flex items using justify-content. Instead, use flex-grow, flex-shrink, and flex-basis to control the sizing of flex items.
- Consider using margin and padding to adjust the spacing between flex items, rather than relying solely on justify-content. This can give you more precise control over the spacing of your elements.
- Test your layout in different browsers and devices to ensure that justify-content behaves as expected. Some older browsers may not support all values of justify-content, so it's important to have fallbacks in place for these cases.
Browser Compatibility
| Chrome | Firefox | Safari | Internet Explorer | Microsoft Edge | Opera |
|---|---|---|---|---|---|
| Yes | Yes | Yes | 10 or later versions | Yes | Yes |