Justify-content:
This is one of the most useful properties in flexbox. It provides alignment along the main-axis, distributes the free-space in an order. Lets's understand this visually.
justify-content:flex-start| flex-end| center| space-between| space-around| space-evenly;
There are start | end | left | right values too, that we don't use much often
Flex-start (default): items are towards the start of the flex-direction.
Flex-end: towards the end.
center : at the center.
space-between: Items are evenly distributed in the line; the first item is on the start line, the last item on the end line.
space-around: Items are evenly distributed in the line with equal space around them. Each item has equal space around them, look at the illustration carefully.
space-evenly: Items are distributed so that the spacing between any two items (and the space to the edges) is equal.
Align-items:
This gives positioning in the cross-axis of the flex-direction. It's just like justify-content but in cross-axis. Its values are,
align-content:stretch | flex-start | flex-end | center | baseline;
All the values are pretty self explanatory,
stretch (default): stretch to fill the container.
flex-start: items are placed at the start of the cross axis.
flex-end: items are placed at the end of the cross axis.
center: items are centered in the cross-axis
baseline: items are aligned such as their baselines align
That's it for justify-content and align-items.
This is a part of my complete guide to Flexbox post on my website. Hopefully, You liked it, if so then do check out the complete guide on my website. You can follow me on Twitter for daily tweets about development and design. Thank u. Happy coding :)
Top comments (0)