8.20. CSS3 Elastic Box (Flex Box)

发布时间 ： 2025-10-25 13:34:14 UTC      

Page Views: 9 views

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

      
 
flex item 1
 
flex item 2
 
flex item 3

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: