justify-content & align-items
justify-content
justify-content in a container with flex-direction: row, aligns the child elements horizontally inside the flex container.
- flex-start (default): Aligns elements at the start (left).
- center: Centers elements horizontally.
- flex-end: Aligns elements at the end (right).
- space-between: Places the maximum possible space between elements.
- space-around: Places equal space around each element, so the edges get half the space found between them.
- space-evenly: Places equal space between elements and around them.
align-items
align-items in a container with flex-direction: row, aligns the child elements vertically. align-content does the same as align-items but only when there are multiple rows (flex-wrap: wrap) and they have wrapped.
- stretch (default): Stretches elements to fill the container height.
- flex-start: Aligns all elements at the top.
- center: Centers elements vertically.
- flex-end: Aligns all elements at the bottom.
- baseline: Aligns elements along the text baseline.
Example
With this dynamic example you can see the different arrangements of the child elements by modifying the justify-content and align-items properties in the selectors.
ResultLive
html
css