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

justify-content property

Specifies a how flex items are aligned along the main axis of the flex container after any flexible lengths and auto margins are resolved.

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

This property is read/write.

Flexible Box Layout ModuleIE11

 

Syntax

justify-content: flex-start | flex-end | center | space-between | space-around

Property values

One of the following values.

flex-start

Initial value. Flex items are packed toward the start of the line. 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

Flex items are packed toward the end of the line. 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

Flex items are packed toward the center of the line. 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

Flex items are evenly distributed in the line. 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 and all remaining children 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

Aligns the elements in the same way as center, unless extra space is present. Any extra space is distributed evenly between each flex item on the line, with spacing at the start of the line and the end of the line being half the size as the extra space between each flex item.

CSS information

Applies Toflex containers
Mediavisual
Inheritedno
Initial Valueflex-start

Standards information

Remarks

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

This property typically helps redistribute free space that's available after items reach their maximum size or space left over from inflexible items.

This property aligns the lines of elements within a flex container in relation to the main axis. Typically, the main axis follows the same direction as text—for example, if the text in your flex container runs left to right, the main axis is the horizontal axis.

The following image displays the values for the justify-content property and their effects on flex items.

The justify-content properties

As of Internet Explorer for Windows Phone 8.1 Update, Internet Explorer for Windows Phone supports the deprecated "-webkit-box-pack" property for interoperability purposes. Because "-webkit-box-pack" does not have an equivalent to the space-around value, if the computed value for justify-content is space-around, the computed value for "-webkit-box-pack" is returned as "".

Examples

In the example below, justify-content is set to space-around for the following flex container. Because there is extra space in this flex container, the extra space is distributed evenly between each flex item on the line, with spacing at the start of the line and the end of the line being half the size as the extra space between each flex item.

A flex container using the space-around value for justify-content


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



#flexContainer {
   width: 250px;
   border: solid 1px #949494;
   display: flex;
   justify-content: space-around;
}
#item1 {
   width: 50px;
   background: #66CC33;
}
#item2 {
   width: 50px;
   background: #0099FF;
}
#item3 {
   width: 50px;
   background: #66CC33;
}

See also

CSSStyleDeclaration

 

 

Afficher:
© 2014 Microsoft