Menu
What is the difference between align-items and align-content?
957
The align-content property determines how flex lines are aligned along the cross-axis while the align-items property determines how flex items are aligned within a flex line and along the cross-axis.
Text alignment is a paragraph formatting attribute that determines the appearance of the text in a whole paragraph. For example, in a paragraph that is left-aligned (the most common alignment), text is aligned with the left margin. In a paragraph that is justified, text is aligned with both margins. Align text left.
The align-self applies to all flex items, allows this default alignment to be overridden for individual flex items. The align-content property only applies to multi-line flex containers, and aligns the flex lines within the flex container when there is extra space in the cross-axis.
The align-content property is a sub-property of the Flexible Box Layout module. It helps to align a flex container's lines within it when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.
The align-items property of flex-box aligns the items inside a flex container along the cross axis just like justify-content does along the main axis. (For the default flex-direction: row the cross axis corresponds to vertical and the main axis corresponds to horizontal. With flex-direction: column those two are interchanged respectively).
Here's an example of how align-items:center looks:
But align-content is for multi line flexible boxes. It has no effect when items are in a single line. It aligns the whole structure according to its value. Here's an example for align-content: space-around;: 
And here's how align-content: space-around; with align-items:center looks: 
Note the 3rd box and all other boxes in first line change to vertically centered in that line.
Here are some codepen links to play with:
http://codepen.io/asim-coder/pen/MKQWbb
http://codepen.io/asim-coder/pen/WrMNWR
Here's a super cool pen which shows and lets you play with almost everything in flexbox.
99
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
