Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

align-content property

Specifies how a flex item's lines align within the flex container when there is extra space along the axis that is perpendicular to the axis defined by the flex-direction property.

Note   As of Internet Explorer 11 the Microsoft vendor prefix ("-ms-") version of this property is no longer supported. Instead use the non-prefixed name align-content, which is preferred for better standards compliance and future compatibility.

This property is read/write.

Flexible Box Layout ModuleIE11

Syntax

align-content: stretch | flex-start | flex-end | center | space-between | space-around

Property values

One of the following values.

stretch

Initial value. Lines stretch to take up the remaining space. If the leftover free space is negative, this value is identical to flex-start. Otherwise, the free space is split equally between all of the lines, increasing their cross size.

flex-start

The starting edge of the first flex item is placed at the start of the flex container. The starting edge of the next flex item is placed edge-to-edge with the ending edge of the first flex item, and so on along the layout axis direction. All space that remains along the layout axis is placed at the end of the layout axis.

flex-end

The ending edge of the first flex item is placed at the end of the flex container. The ending edge of the next flex item is placed edge-to-edge with the starting edge of the first flex item, and so on along the layout axis direction. All space remaining along the layout axis is placed at the start of the layout axis.

center

All flex items are placed edge-to-edge with each other, as described in the descriptions for the flex-start or flex-end keywords. However, the group of flex items is centered between the starting and ending edges of the flex container so that all remaining space is evenly distributed before the first flex item and after the last flex item.

space-between

The starting edge of the first flex item is placed at the start of the flex container. The ending edge of the last flex item is placed edge-to-edge with the end of the flex container. All remaining flex items are placed between the first and last flex items, so that any space that remains along the layout axis is equally distributed between flex items.

space-around

Lines are evenly distributed in the flex container, with half-size spaces on either end. If the leftover free space is negative or there is only a single line in the flex container, this value is identical to center. Otherwise, the lines in the flex container are distributed such that the empty space between any two adjacent lines is the same, and the empty space before the first and after the last lines in the flex container are half the size of the other empty spaces.

CSS information

Applies Tomulti-line flex containers
Mediavisual
Inheritedno
Initial Valuestretch

Standards information

Remarks

Prior to IE11, this property was known as -ms-flex-line-pack. For more information on these compatibility changes, see Flexible box ("Flexbox") layout updates.

Be aware that these are writing-mode and direction dependent keywords. The starting and ending edges of the flex container and flex items depend on the layout direction. For instance, for a left-to-right layout, the starting edge is the left edge of the flex container, for a top-to-bottom layout the starting edge is the top edge and so on. Likewise, the ending edge of a flex item is the right edge in a left-to-right layout, the bottom edge in a top-to-bottom layout, and so on.

The align-content property only has an effect when the flex container has multiple lines of flex items.

The following image displays the values for align-content and their effects on a flex container.

An image showing all of the align-content properties

Examples

The example below shows the effect of align-content on a flex container with multiple lines.


<div id="flexContainer">
   <div class="green">1</div>
   <div class="blue">2</div>
   <div class="green">3</div>
   <div class="blue">4</div>
   <div class="green">5</div>
   <div class="blue">6</div>
</div>

In the CSS below, align-content is set to space-around. Here, lines are evenly distributed in the flex container, with half-size spaces on either end.

A flex container with the align-content property


#flexContainer {
   height: 250px;
   width: 400px;
   border: solid 1px #949494;
   display: flex;
   flex-flow: row wrap;
   align-content: space-around;
}
.green {
   width: 120px;
   background: #66CC33;
}
.blue {
   width: 120px;
   background: #0099FF;
}

See also

CSSStyleDeclaration

 

 

Show:
© 2014 Microsoft