justify-content
Aligns items and distributes free space along the main axis of a flex or grid container.
1,238 effects in the catalog use this property.
Syntax
justify-content: flex-start | center | space-between | space-around | space-evenly;Watch out
`space-around` makes outer gaps half the size of inner gaps. Use `space-evenly` when visually equal spacing is the intent.
Common values
space-between- Pins the first and last items to the edges and shares space between them
space-evenly- Makes every gap equal, including the outer edges
Effects using justify-content
These are working effects from the catalog. Open a tile to inspect the full source.