CSS3 Elastic Box (Flex Box)

CSS3 Elastic Box (Flex Box)

Elastic box is a new layout mode for CSS3.

The CSS3 Flexible Box, or flexbox, is a layout that ensures that elements have the right behavior when the page needs to adapt to different screen sizes and device types.

The purpose of introducing an elastic box layout model is to provide a more efficient way to arrange, align, and allocate white space to child elements in a container.

---

Browser support

The numbers in the table support the version number of the first browser for this property.

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

Property
Basic support (single-line flexbox)	29.0 21.0 -webkit-	11.0	22.0 18.0 -moz-	6.1 -webkit-	12.1 -webkit-
Multi-line flexbox	29.0 21.0 -webkit-	11.0	28.0	6.1 -webkit-	17.0 15.0 -webkit- 12.1

---

CSS3 Elastic Box Content

Elastic boxes consist of Flex containers and Flex items.

An elastic container defines an elastic container by setting the value of the display property to flex or inline-flex.

An elastic container contains one or more elastic child elements.

Note: Outside the elastic container and within the elastic child element is rendered normally. Elastic boxes only define how elastic child elements are laid out within elastic containers.

Elastic child elements are usually displayed on one line within the elastic box. By default, there is only one row per container.

The following elements show elastic child elements displayed in one row, from left to right:

Of course we can modify the arrangement.

If we direction rtl (right-to-left), the arrangement of elastic child elements changes, and so does the page layout:

---

flex-direction

flex-direction specifies the position of elastic child elements in the parent container.

Grammar

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

flex-direction are:

• Row: Arrange horizontally from left to right (left), the default arrangement.
• row-reverse: Reverse horizontal arrangement (right alignment, back to front, last item at the top).
• column: Vertical arrangement.
• column-reverse: Reverse the vertical arrangement, from the back to the front, with the last item at the top.

The following example demonstrates row-reverse

The following example demonstrates the column

The following example demonstrates the column-reverse

---

The justify-content property

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

The justify-content syntax is as follows:

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

Individual value resolution:

• flex-start：
  

  The elastic item is filled next to the line head. T his is the default. The main-start margin margin of the first elastic item is placed on the line's main-start edge, and subsequent elastic items are placed in turn.

• flex-end：
  

  Elastic items are filled close to the end of the line. The main-end margin margin of the first elastic item is placed on the line's main-end edge, and subsequent elastic items are placed equally in turn.

• center：
  

  Elastic items are centered next to the fill. (If the remaining free space is negative, the elastic project overflows in both directions at the same time.)

• space-between：
  

  Elastic items are evenly distributed on the line. I f the remaining space is negative or there is only one elastic item, the value is equivalent to flex-start. Otherwise, the margins of the first elastic item are aligned with the main-start edge of the row, while the margins of the last elastic item are aligned with the main-end edges of the row, and the remaining elastic items are distributed across the line, with equal intervals for adjacent items.

• space-around：
  

  Elastic items are evenly distributed on the line, leaving half the space between the sides. I f the remaining space is negative or there is only one elastic item, the value is equivalent to center. Otherwise, elastic items are distributed along the row at equal intervals to each other (e.g. 20px), with half the interval between the front and end sides and the elastic container (1/2 x 20px x 10px).

Effect map display:

The following example demonstrates the flex-end

The following example demonstrates the center

The following example demonstrates space-between

The following example demonstrates the space-around

---

the align-items property

align-items 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

Individual value resolution:

• flex-start: The boundary of the starting position of the side axis (vertical axis) of the elastic box element is close to the starting boundary of the side axis of the line.
• flex-end: The boundary of the starting position of the side axis (vertical axis) of the elastic box element is close to the end boundary of the side axis of the line.
• Center: The elastic box element is centered on the side axis (vertical axis) of the row. (If the size of the row is smaller than the size of the elastic box element, the same length is overflowed in both directions).)
• baseline: If the inner and side axes of an elastic box element are the same, the value is equivalent to 'flex-start'. In other cases, the value participates in baseline alignment.
• stretch: If the property value that specifies the sideshaft size is 'auto', its value causes the dimensions of the item's margin box to be as close as possible to the size of the row in which they are located, but at the same time adhere to the 'min/max-width/height' property.

The following example demonstrates stretch(默认值)

The following example demonstrates the flex-start

The following example demonstrates the flex-end

The following example demonstrates the center

The following example demonstrates the baseline

---

flex-wrap property

The flex-wrap property specifies how the child elements of the elastic box wrap.

Grammar

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

Individual value resolution:

• Nowrap - By default, elastic containers are single lines. In this case, the elastic child may overflow the container.
• wrap - The elastic container is multi-row. In this case, the overflow portion of the elastic child is placed on a new line, and a break occurs inside the child
• wrap-reverse-reverse-reverse wrap arrangement.

The following example demonstrates nowrap

The following example demonstrates the wrap

The following example demonstrates the wrap-reverse

---

the align-content property

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

Grammar

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

Individual value resolution:

• stretch - default. The rows will stretch to take up the remaining space.
• flex-start - Rows are stacked at the beginning of the elastic box container.
• flex-end - Rows are stacked at the end of the elastic box container.
• center - The lines are stacked in the middle of the elastic box container.
• space-between Rows are evenly distributed in elastic box containers.
• space-around - Rows are evenly distributed in elastic box containers, with both ends retaining half the size of the spacing between child elements and child elements.

The following example demonstrates the center

---

Elastic child element properties

Sort

Grammar

order: 

Individual value resolution:

• The order of arrangement is defined by integer: the order of the order is defined by the integer value, which is small in the first place. Can be negative.

order property sets the properties of elastic child elements in an elastic container:

Aligned

Set the "margin" value to the "auto" value to automatically get the space left in the elastic container. Therefore, setting the vertical margin value to "auto" allows elastic child elements to be fully concentrated in both upper axis directions of the elastic container.

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

Perfect center

The following examples will perfectly address the centering issues we normally encounter.

Using elastic boxes, the center change is very simple, only want to margin: auto; The elastic child element can be completely centered in the direction of the two upper axes:

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

Individual value resolution:

• auto: If the value of 'align-self' is 'auto', it is calculated as the 'align-items' value of the element's parent element, and 'stretch' if it does not have a parent element.
• flex-start: The boundary of the starting position of the side axis (vertical axis) of the elastic box element is close to the starting boundary of the side axis of the line.
• flex-end: The boundary of the starting position of the side axis (vertical axis) of the elastic box element is close to the end boundary of the side axis of the line.
• Center: The elastic box element is centered on the side axis (vertical axis) of the row. (If the size of the row is smaller than the size of the elastic box element, the same length is overflowed in both directions).)
• baseline: If the inner and side axes of an elastic box element are the same, the value is equivalent to 'flex-start'. In other cases, the value participates in baseline alignment.
• stretch: If the property value that specifies the sideshaft size is 'auto', its value causes the dimensions of the item's margin box to be as close as possible to the size of the row in which they are located, but at the same time adhere to the 'min/max-width/height' property.

The following example demonstrates the application of different values of align-self on elastic child elements:

Flex

flex property specifies how elastic child elements allocate space.

Grammar

flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

Individual value resolution:

• The none:none keyword is calculated as: 0 0 auto
• flex-grow: Defines the expansion ratio of elastic box elements.
• flex-shrink: Defines the shrinkage ratio of elastic box elements.
• flex-basis: Defines the default baseline value for elastic box elements.

In the following example, the first elastic child element takes up 2/4 of the space, while the other two each occupy 1/4 of the space:

---

Use elastic boxes to create responsive pages

---

CSS3 Elastic Box Properties

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

Property	Describe
display	Specify the type of HTML element box.
flex-direction	Specifies how the child elements in the elastic container are arranged
justify-content	Sets the alignment of elastic box elements in the direction of the spindle (horizontal axis).
align-items	Sets the alignment of elastic box elements in the direction of the side axis (vertical axis).
flex-wrap	Whether to line up when the child elements of the elastic box are set beyond the parent container.
align-content	Modifying the behavior of the flex-wrap property, similar to allign-items, is not to set child element alignment, but to set line alignment
flex-flow	Short for flex-direction and flex-wrap
order	Set the order in which the children of the elastic box are arranged.
align-self	Used on elastic child elements. Overwrites the container's align-items property.
Flex	Sets how the child elements of the elastic box allocate space.