8.20. CSS3 Elastic Box (Flex Box)

Elastic box is a new layout mode of CSS3.

A CSS3 resilient box (Flexible Box or flexbox) is a layout that ensures thatelements behave appropriately when the page needs to adapt to different screen sizes and device types.

The purpose of introducing the elastic box layout model is to provide a moreefficient way to arrange, align and allocate blank space to the child elements in a container.

8.20.1. Browser support ¶

The number in the table represents the version number of the first browser that supports the property.

Immediately after the number. -webkit- or -moz- specifies the prefix for the browser.

Attribute
Basic support	29	11	22	6.1-webkit-	12.1-webkit-
(single-line flexbox)	21.0-webkit-		18.0-moz-
Multi-line flexbox	29	11	28	6.1-webkit-	17
	21.0-webkit-				15.0-webkit-
					12.1

8.20.2. CSS3 elastic box content ¶

The elastic box consists of an elastic container (Flex container) and an elastic sub-element (Flex item).

Elastic containers through settin display the value of the flex or inline-flex define it as an elastic container.

An elastic container contains one or more elastic sub-elements.

Note: the outside of the elastic container and the inside of the elastic sub-element are rendered normally. The elastic box only defines how elastic sub-elements are laid out within the elastic container.

Elastic sub-elements are usually displayed in a row in an elastic box. By default, there is only one row per container.

The following elements show that elastic subelements are displayed in a row,from left to right:

Example

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>
</div>

</body>
</html>

Of course we can change the arrangement.

If we set the direction property is rtl (right-to-left), the arrangement of elastic elements will also change, and the page layout will also change:

Example

body {
    direction: rtl;
}

.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}

8.20.3. `flex-direction` ¶

flex-direction property specifies the location of the elastic child element in the parent container.

Grammar ¶

flex-direction: row | row-reverse | column | column-reverse

The flex-direction values are:

row :Horizontal arrangement from left to right (left alignment), the default arrangement.
row-reverse :Reverse the horizontal arrangement (right-aligned, from backto front, with the last item at the front.
column :Arranged longitudinally
column-reverse :Reverse the vertical arrangement, from back to front, with the last item at the top.

The following example demonstrates row-reverse use:

Example

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

The following example demonstrates column use:

Example

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

The following example demonstrates column-reverse use:

Example

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

8.20.4. `justify-content` attribute ¶

The justify-content attribute is applied to the elastic container, aligning the elastic items along the principal axis (main axis) of the elastic container.

The justify-content syntax is as follows:

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

Each value is resolved:

flex-start :The elastic item is filled next to the wardrobe. This is the default value. Of the first elastic term the main-start outer margin isplaced in the main-start boundary line, and the subsequent elasticitems are placed flush in turn.
flex-end :The elastic item is filled next to the end of the line Of the first elastic term main-end outer margin is placed in the main-end the boundary line, and the subsequent elastic items are placed flush in turn.
center :The elastic project is centered next to the fill. (if the remaining free space is negative, the elastic project will overflow in both directions.)
space-between :Elastic items are evenly distributed on the line If the remaining space is negative or there is only one elastic term, the value is equal to flex-start . Otherwise, the outer margin and row of the first elastic term main-start The margin is aligned, while the outer margin of the last elastic term and the line main-end the edges are aligned, then the remaining elastic items are distributed on the line, and the adjacent items are evenly spaced.
space-around :Elastic items are evenly distributed on the line, leaving half the space between the two sides. If the remaining space is negative or there is only one elastic term, the value is equal to center . Otherwise, elastic items are distributed along the line and are evenly spaced from each other (for example, 20px), leaving half of the gap between the two sides of the head and tail and the elastic container (1/2*20px=10px).

The following example demonstrates flex-end use:

Example

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

The following example demonstrates center use:

Example

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

The following example demonstrates space-between use:

Example

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

The following example demonstrates space-around use:

Example

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

8.20.5. `align-items` attribute ¶

align-items sets or retrieves the alignment of elastic box elements in the direction of the side axis (vertical axis).

Grammar ¶

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

Each value is resolved:

flex-start :The boundary of the starting position of the side axis (longitudinal axis) of the elastic box element is close to the starting boundary of the side axis of the row.
flex-end :The boundary of the starting position of the side axis (longitudinal axis) of the elastic box element is close to the end boundary of the side axis of the row.
center :The elastic box element is centered on the side axis (longitudinal axis) of the row. (if the size of the row is less than the size of the elastic box element, it overflows the same length in both directions.)
baseline :If the inline axis of the elastic box element is the same as the side axis, this value is equivalent to ‘flex-start’ In other cases, this value participates in baseline alignment.
stretch :If the property value of the specified side axis size is’ auto’,its value will make the size of the project’s margin box as close as possible to the size of the row, but will also comply with the limit of the ‘min/max-width/height’ property.

The following example demonstrates stretch use of (default):

Example

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: stretch;
    align-items: stretch;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

The following example demonstrates flex-start use:

Example

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

The following example demonstrates flex-end use:

Example

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

The following example demonstrates center use:

Example

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

The following example demonstrates baseline use:

Example

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: baseline;
    align-items: baseline;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

8.20.6. `flex-wrap` attribute ¶

flex-wrap property is used to specify how the child elements of the elastic box wrap.

Grammar ¶

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

Each value is resolved:

nowrap -by default, the elastic container is a single line. In this case, elastic subitems may overflow the container.
wrap -the elastic container is multi-line. In this case, the overflow part of the elastic subitem will be placed in the new row, and the line break will occur inside the subitem.
wrap-reverse -reverse wrap arrange.

The following example demonstrates nowrap use:

Example

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    width: 300px;
    height: 250px;
    background-color: lightgrey;
}

The following example demonstrates wrap use:

Example

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 300px;
    height: 250px;
    background-color: lightgrey;
}

The following example demonstrates wrap-reverse use:

Example

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;
    width: 300px;
    height: 250px;
    background-color: lightgrey;
}

8.20.7. `align-content` attribute ¶

align-content property is used to modify flex-wrap property. Similar to align-items , but instead of setting the alignment of elastic elements, it sets the alignment of individual rows.

Grammar ¶

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

Each value is resolved:

stretch -default. The lines will stretch to take up the remaining space.
flex-start -each row is stacked to the starting position of the elastic box container.
flex-end -the lines are stacked to the end of the elastic box container.
center -the rows are stacked in the middle of the elastic box container.
space-between -the rows are evenly distributed in the elastic box container.
space-around -the rows are evenly distributed in the elastic box container, leaving half of the distance between child elements and child elements at both ends.

The following example demonstrates center use:

Example

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: center;
    align-content: center;
    width: 300px;
    height: 300px;
    background-color: lightgrey;
}

8.20.8. Elastic subelement attribute ¶

Sort ¶

Grammar ¶

order:

Each value is resolved:

<integer> use integer values to define the order of arrangement, with small values at the front. Can be negative.

order property to set the properties of the elastic sub-element in the elastic container:

Example

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}

.first {
    -webkit-order: -1;
    order: -1;
}

Alignment ¶

Set the “margin” value to the “auto” value to automatically get the remaining space in the elastic container. So set the vertical direction margin a value of “auto” makes the elastic element fully centered on both axes of the elastic container.

The following example sets the margin-right: auto; . It places the remaining space on the right side of the element:

Example

.flex-item {
    background-color: cornflowerblue;
    width: 75px;
    height: 75px;
    margin: 10px;
}

.flex-item:first-child {
    margin-right: auto;
}

The perfect center. ¶

The following example will perfectly solve the center problem that we usually encounter.

With an elastic box, it’s easy to center, just set the margin: auto; ,You can make the elastic subelement fully centered in the two upper axis directions:

Example

.flex-item {
    background-color: cornflowerblue;
    width: 75px;
    height: 75px;
    margin: auto;
}

`align-self` ¶

align-self property is used to set the alignment of the elastic element itself in the direction of the side axis (vertical axis).

Grammar ¶

align-self: auto | flex-start | flex-end | center | baseline | stretch

Each value is resolved:

auto :If the value of ‘align-self’ is’ auto’, its calculated value is the’align-items’ value of the parent element of the element, and if it does not have a parent element, the calculated value is’ stretch’.
flex-start :The boundary of the starting position of the side axis (longitudinal axis) of the elastic box element is close to the starting boundary of the side axis of the row.
flex-end :The boundary of the starting position of the side axis (longitudinal axis) of the elastic box element is close to the end boundary of the side axis of the row.
center :The elastic box element is centered on the side axis (longitudinal axis) of the row. (if the size of the row is less than the size of the elastic box element, it overflows the same length in both directions.)
baseline :If the inline axis of the elastic box element is the same as the side axis, this value is equivalent to ‘flex-start’ In other cases, this value participates in baseline alignment.
stretch :If the property value of the specified side axis size is’ auto’,its value will make the size of the project’s margin box as close as possible to the size of the row, but will also comply with the limit of the ‘min/max-width/height’ property.

The following example demonstrates an elastic subelement on the align-self application effects of different values:

Example

.flex-item {
    background-color: cornflowerblue;
    width: 60px;
    min-height: 100px;
    margin: 10px;
}

.item1 {
    -webkit-align-self: flex-start;
    align-self: flex-start;
}
.item2 {
    -webkit-align-self: flex-end;
    align-self: flex-end;
}

.item3 {
    -webkit-align-self: center;
    align-self: center;
}

.item4 {
    -webkit-align-self: baseline;
    align-self: baseline;
}

.item5 {
    -webkit-align-self: stretch;
    align-self: stretch;
}

Flex ¶

flex property is used to specify how elastic child elements allocate space.

Grammar ¶

flex: auto | initial | none | inherit |  [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

Each value is resolved:

auto :The calculated value is 1 1 auto
initial :The calculated value is 0 1 auto
none : the calculated value is 0 auto
inherit :Inherit from parent element
[ flex-grow ] :Defines the expansion ratio of the elastic box element
[ flex-shrink ] :Defines the shrinkage ratio of the elastic box element
[ flex-basis ] :Defines the default datum value of the elastic box element

In the following example, the first elastic subelement takes up 2 beat 4, and the other two take up 1 prime 4 each:

Example

.flex-item {
    background-color: cornflowerblue;
    margin: 10px;
}

.item1 {
    -webkit-flex: 2;
    flex: 2;
}

.item2 {
    -webkit-flex: 1;
    flex: 1;
}

.item3 {
    -webkit-flex: 1;
    flex: 1;
}

8.20.9. CSS3 Elastic Box Properties ¶

The following table lists the attributes commonly used in elastic boxes:

Attribute	Description
Display	Specifies the box type of the HTML element.
Flex-direction	The arrangement of subelements in the elastic container is specified.
Justify-content	Sets the alignment of the elastic box element in the direction of the principal axis (horizontal axis).
Align-items	Sets the alignment of the elastic box element in the direction of the side axis (longitudinal axis).
Flex-wrap	Sets whether the child elements of the elastic box wrap when they exceed theparent container.
Align-content	The behavior of modifying the flex-wrap property is similar to align-items, but instead of setting the child element alignment, it sets the line alignment
Flex-flow	Abbreviations for flex-direction and flex-wrap
Order	Sets the order of the child elements of the elastic box.
Align-self	Used on elastic subelements. Overrides the container’s align-items property.
Flex	Sets how the child elements of the elastic box allocate space.