EN
Ce contenu n’est pas disponible dans votre langue. Voici la version anglaise.

align-items property

Specifies the alignment value (perpendicular to the layout axis defined by the flex-direction property) of flex items in the flex container.

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-items, which is preferred for better standards compliance and future compatibility.

This property is read/write.

Flexible Box Layout ModuleIE11

 

Syntax

align-items: stretch | flex-start | flex-end | center | baseline

Property values

One of the following alignment values.

stretch

The initial value. Each flex item is stretched to completely fill the space that is available perpendicular to the layout axis. If set, height or width related properties for a flex item take precedence and layout follows the flex-start rule.

flex-start

If the flex container has a computed value for flex-direction of "row" or "column", the leading edge (or baseline) of each flex item is aligned with the leading edge of the flex container. Any remaining space, perpendicular to the layout axis, is placed after the trailing edge of each flex item.

If the parent element has a computed value for flex-direction of "row-reverse" or "column-reverse", the trailing edge (or baseline) of each flex item is aligned with the trailing edge of the flex container. Any remaining space, perpendicular to the layout axis, is placed before the leading edge of each flex item.

flex-end

If the flex container has a computed value for flex-direction of "row" or "column", the trailing edge of each flex item is aligned with the trailing edge of the object. Any remaining space, perpendicular to the layout axis, is placed before the leading edge of each flex item.

If the parent element has a computed value for flex-direction of "row-reverse" or "column-reverse", the leading edge of each flex item is aligned with the leading edge of the flex container. Any remaining space, perpendicular to the layout axis, is placed after the trailing edge of each flex item.

center

Each flex item is centered between the leading and trailing edges of the flex container. Any remaining space, perpendicular to the layout axis, is evenly distributed before and after each flex item.

baseline

The baselines (leading edge or trailing edge depending on the flex-direction property) of all flex items are aligned with each other.

The flex item that occupies the most space, perpendicular to the layout axis, follows the flex-start rule. The baselines of all remaining elements are then aligned with the baseline of this element.

CSS information

Applies Toflex containers
Mediavisual
Inheritedno
Initial Valuestretch

Standards information

Remarks

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

Typically, the main axis follows the same direction as text—for example, if the text in your flexbox runs left to right, the main axis is the horizontal axis.

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 image below shows all of the values for the align-items property.

An illustration showing the align-items property

Examples

In this example showing the align-items property, the flex container contains three flex items.


<div id="flexContainer">
   <div id="item1">1</div>
   <div id="item2">2</div>
   <div id="item3">3</div>
</div>

The following example sets align-items to center. In this example, each flex item is centered between the leading and trailing edges of the flex container, and the remaining space, perpendicular to the layout axis, is evenly distributed before and after each flex item.

An image displaying the align-items property


#flexContainer {
   height: 100px;
   border: 1px solid #949494;
   display: flex;
   flex-direction: row;
   align-items: center;
}
#item1 {
   background: #66CC33;
   width: 100px;
}
#item2 {
   background: #0099FF;
   width: 100px;
}
#item3 {
   background:#66CC33;
   width: 100px;
}

See also

CSSStyleDeclaration

 

 

Afficher:
© 2014 Microsoft