AWS Amplify - the fastest, easiest way to develop mobile and web apps that scale.
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.
Note, this property has no effect when the flexbox has only a single line.
The align-content
property accepts 6 different values:
flex-start
: lines packed to the start of the containerflex-end
: lines packed to the end of the containercenter
: lines packed to the center of the containerspace-between
: lines evenly distributed; the first line is at the start of the container while the last one is at the endspace-around
: lines evenly distributed with equal space between themstretch
(default): lines stretch to take up the remaining space
The following figure helps understand how the lines are stacked up in a flex container depending on the align-content
value:
Syntax
align-content: flex-start | flex-end | center | space-between | space-around | stretch
.flex-container {
align-content: space-around;
}
Demo
The following demo shows how lines are stacked out depending on the `align-content` value:
- The red list is set to
flex-start
- The yellow list is set to
flex-end
- The blue list is set to
center
- The green list is set to
space-between
- The pink list is set to
space-around
- The brown list is set to
stretch
Check out this Pen!
Related Properties
Other Resources
- align-items in the spec
- align-items at MDN
- Advanced cross-browser flexbox
- A guide to Flexbox
- Using Flexbox
- Old Flexbox and new Flexbox
Browser Support
- (modern) means the recent syntax from the specification (e.g.
display: flex;
) - (hybrid) means an odd unofficial syntax from 2011 (e.g.
display: flexbox;
) - (old) means the old syntax from 2009 (e.g.
display: box;
)
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
21+ (modern) 20- (old) |
3.1+ (old) | 2-21 (old) 22+ (new) |
12.1+ (modern) | 10+ (hybrid) | 2.1+ (old) | 3.2+ (old) |
Blackberry browser 10+ supports the new syntax.
For more informations about how to mix syntaxes in order to get the best browser support, please refer to this article (CSS-Tricks) or this article (DevOpera).
Actually it doesn’t work even on FF 25.0 !
Issue in IE with Felx, Image get stretches height and not equally distributed, check the example link http://codepen.io/anon/pen/xEPxAN