CSS3 Flexbox Flexible layout

Flex is the abbreviation for flexible box, meaning "resilient layout", which provides maximum flexibility for box-shaped models. Any container can be specified as a flex layout. In 2009, the website proposed a new solution----flex layout that enables easy, complete, responsive implementation of various page layouts. Currently, it has been supported by all browsers, which means that this feature is now safe to use.

1, first look at the values of these attributes

Display:flex | Inline-flex; Flex-direction:row | row-reverse | column | column-reverse;//Specifies the arrangement of the neutron elements in the elastic container

Flex-wrap:wrap-reverse; Sets whether the child elements of the elastic box are wrapped when they are outside the parent container.

Flex-flow:row-reverse | Warp Justify-content:cnter | flex-end | flex-start | space-around | space-between;//Set the alignment of the elastic box element in the direction of the spindle (horizontal axis).

Align-items:flex-start | Flex-end | Stretch | Baseline | Center Sets the alignment of the elastic box element in the direction of the side axis (vertical axis).

Align-content:stretch | Space-around | Space-between; Modify the behavior of the Flex-wrap property, similar to Align-items, but instead of setting child element alignment, instead set line alignment Order:-1 | number;//Set the order of the child elements of the elastic box.

Flex-grow:1; The value of the Flex-grow property represents the proportion of space that is allocated between different entries when the container has extra space.

flex-shrink:0; flex-basis:number+px; flex-self:flex-end;//attributes define how a single flex item should be aligned on the side axis, and this definition overrides the default value established by Align-items.

Flex-flow://attributes are shorthand for flex-direction and Flex-wrap properties, determining how flex items are arranged

2. Axes (axis)

each Flex box layout consists of two axes. The axis in which the elastic items are arranged is called the spindle ( main axis ). The axis perpendicular to the spindle is called the lateral axis (cross axis ).

• flex-directionproperty to establish the spindle.
• justify-contentproperty defines how elastic items are arranged along the spindle on the current line.
• align-itemsProperty defines how the flex item is arranged along the side axis by default on the current line.
• align-selfProperties define how a single flex item should be aligned on the side axis, and this definition overrides align-items the established default values.

3. Azimuth (Direction)

various sides of the elastic container (spindle starting main start point ()/spindle main end end point () and side cross start axis start ()/End cross end of Side axis () ) describes the starting and ending points of the elastic entry flow. They depend on the spindle and side axis of the elastic container and the direction established by the Writing-mode (from left to right, right to left, etc.).

• orderProperty associates an element with an ordinal group and determines which elements appear first.
• flex-flowAttributes are flex-direction shorthand flex-wrap for properties and determine how elastic items are arranged.
  Row (line)
• Depending flex-wrap on the property, the flex item can be arranged in a single row or multiple rows. This property controls the direction of the side axis and the direction of the new row arrangement.

4. Size (Dimension)

Depending on the spindle and side axis of the elastic container, the width and height of the elastic item are referred to as the spindle size (main size) and the side axis size (cross size).

flex-growSets or retrieves the expansion ratio of the Flex box, which defaults to 0.
flex-basisSets the initial width of the project, the default is auto
flex-shrinkSets or retrieves the shrink ratio of the elastic box.

flex-grow, flex-shrink flex and flex-basis can be used: flex-grow , instead of flex-shrink flex-basis

5. Assign Flex Elastic box

• display : flex 或 display : inline-flex

6、Optional value of the Flex-direction property and its meaning

　　flex-direction属性确立主轴

• The row(default) spindle is horizontally oriented. The sorting order is the same as the document order of the page. If the document order is, the order is left-to-right, or if the document order is RTL, the order is right-to-left.
• The row-reverse spindle is horizontally oriented. The sorting order is reversed from the document order of the page.
• The column spindle is in the vertical direction. The sort order is top to bottom.
• The column-reverse spindle is vertically oriented. The sorting order is from bottom to top.

7. Optional value of Flex-wrap attribute and its meaning

　　flex-wrap设置弹性盒子的子元素超出父容器时是否换行。

• The entries in the nowrap(default) container occupy only one row of the container in the spindle direction, and there may be a phenomenon where entries overlap or exceed the container range.
• Wrap When an entry in a container exceeds a row of the container in the spindle direction, the entry is arranged to the next line. The next line is positioned in the same direction as the intersection axis.
• Wrap-reverse is similar to wrap in that the position of the next line is the opposite of the cross axis.

8. Optional values and meanings of the justify-content attribute

　　justify-content属性定义了在当前行上弹性项目沿主轴如何排布。

• The flex-start entry concentrates on the starting position of the line. The first entry is aligned with the boundary of its row in the starting direction of the spindle, and the remaining entries are arranged sequentially.
• The flex-end entry concentrates on the end direction of the line. The last entry is aligned with the boundary of its row in the end direction of the spindle, and the remaining entries are arranged sequentially.
• Center Entries focus on the center of the row. The entries are arranged in the center of the line, leaving the same size blank space in the starting and ending directions of the spindle. If the empty space is insufficient, the entry will exceed the same space in two directions.
• Space-between The first entry is aligned with the boundary of its row in the starting direction of the spindle, and the last entry is aligned with the boundary of its row in the end direction of the spindle. White space is evenly distributed between entries, making the space between adjacent entries the same size.
• Space-around is similar to Space-between, where the same white space exists between the first entry and the last entry and the boundary of the line, and the size of the white space is half the size of the empty space between entries.

9. Optional values and meanings of the Align-items attribute

• The Flex-start entry remains aligned with the boundary of its row in the start direction of the intersection axis.
• The flex-end entry remains aligned with the boundary of its row in the end direction of the intersection axis.
• The Center entry's margin box is centered on the cross axis. If the cross axis size is less than the size of the entry, the entry will exceed the same size in two directions.
• baseline entries remain aligned on the baseline. In all entries, the line is the largest entry in the direction of the intersection, and it remains aligned with the boundary of the row in the intersection direction.
• Stretch If the calculated value for the cross-axis dimension of an entry is "Auto", the value it actually uses will make the entry as full as possible on the cross-axis direction.

10. Optional values and meanings of the align-content attribute

(Modify the behavior of the Flex-wrap property, similar to Align-items, but instead of setting child element alignment, set line alignment)

• The Flex-start Line focuses on the start position of the intersection axis of the container. The first line is aligned with the boundary of the container in the start direction of the intersection, and the remaining rows are arranged sequentially.
• The flex-end Line focuses on the end position of the intersection of the container. The first line is aligned with the boundary of the container in the end direction of the intersection, and the remaining rows are arranged sequentially.
• The center Row is centered in the container. Rows are arranged in the center of the container, leaving a blank space of the same size in the start and end directions of the intersection axis. If there is not enough white space, the rows will exceed the same space in two directions.
• space-between rows are evenly distributed in the container. The first line is aligned with the boundary of the container in the start direction of the intersection, and the last line is aligned with the boundary of the container in the end direction of the intersection axis. White space is evenly distributed between rows, making the space between adjacent lines the same size.
• Space-around is similar to Space-between, where there is also a white space between the first line entry and the last row and the boundary of the container row, and the size of the white space is half the size of the blank space between the rows.
• Stretch stretches the line to fill the remaining space. The extra space is evenly distributed between rows, making the cross-axis size of each row larger.

Take a look at a demo

? <!  DOCTYPE html><meta charset= "UTF-8"/>
　　
CSS3 Flexbox Flexible layout