Deep understanding of flexbox expansion box in css3

This is because the layout of the flexbox expansion box is so powerful that I didn't care about it as an attribute of display.

To solve this layout problem, we should first understand some basic problems. Let's first review the attributes of display:

None: hides an object. Unlike the hidden value of the visibility attribute, it does not reserve its physical space for hidden objects.
Inline: specifies the object as an inline element. Block: specifies the object as a block element.
List-item: specifies the object as a list item. Inline-block: specifies the object as an inline block element. (CSS2)
Table: specify an object as a table at the block element level. Similar to html tags <table> (CSS2)
Inline-table: specifies an object as an inline element-level table. Similar to html tags <table> (CSS2)
Table-caption: specifies the object as the table title. Similar to html tags <caption> (CSS2)
Table-cell: specifies an object as a table cell. Similar to html tags <td> (CSS2)
Table-row: specifies an object as a table row. Similar to html tags <tr> (CSS2)
Table-row-group: specifies an object as a table row group. Similar to html tags <tbody> (CSS2)
Table-column: specifies an object as a table column. Similar to html tags <col> (CSS2)
Table-column-group: specifies the object to be displayed as a table column group. Similar to html tags <colgroup> (CSS2)
Table-header-group: specifies the object as the table Title group. Similar to html tags <thead> (CSS2)
Table-footer-group: specifies an object as a table footer group. Similar to html tags <tfoot> (CSS2)
Run-in: determines whether an object is an inline object or a block-level object based on the context. (CSS3)
Box: display objects as auto scaling boxes. (The oldest version of the expansion box) (CSS3)
Inline-box: displays the object as an inline block-level elastic expansion box. (The oldest version of the expansion box) (CSS3)
Flexbox: Displays objects as auto scaling boxes. (Telescopic box transitional version) (CSS3)
Inline-flexbox: displays an object as an inline block-level elastic expansion box. (Telescopic box transitional version) (CSS3)
Flex: Displays objects as auto scaling boxes. (Latest telescopic box version) (CSS3)
Inline-flex: displays an object as an inline block-level elastic expansion box. (Latest telescopic box version) (CSS3)

We can see that the latest version is display: flex. Of course, it will be useful if we use an excessive version, but we will follow the latest specifications.

Let's take a look at the definition of the telescopic box and some concepts:

Flexbox (scaling layout box) is a new layout mode in CSS3, designed for more complex web page requirements in modern networks.

Although we can now use Flexbox to easily create a layout that is not as hard to understand as before, we still need to spend some time getting familiar with how to use Flexbox. New terms and concepts may be an obstacle for us to use Flexbox, so let's take a look at them first.

Flexbox consists of scaling containers and scaling projects. You can set the display attribute of an element to flex or inline-flex to get a scaling container. The container set to flex is rendered as a block-level element, while the container set to inline-flex is rendered as a line element.

Flexbox specifications have been working for three years. Different browsers also implement different lab versions. In September 2012, the third major revision of Flexbox syntax entered the Candidate Recommendation stage. This means W3C considers the current syntax to be stable and encourages browser developers to implement it. In short, the expansion box layout is the most practical specification I have ever seen. From the release of 2009 to the final conclusion last year, it was changed three times.

Flexbox standard schedule:

Draft work in July 2009 (display: box ;)
Draft March 2011 work (display: flexbox ;)
Draft November 2011 work (display: flexbox ;)
Draft March 2012 work (display: flexbox ;)
Draft work in June 2012 (display: flex ;)
Candidate Recommendation for September 2012 (display: flex ;)

Flexbox has been quickly supported by browsers. Chrome 22 +, Opera 12.1 +, and Opera Mobile 12.1 + have supported Flexbox described in this article. Firefox 18 and Blackberry 10 will soon be implemented. I recommend that you use a supported browser to read this article and view examples. Despite this, many browser vendors have a private prefix, so it is particularly troublesome:

Div {

Display:-webkit-box;

Display:-moz-box;

Display:-o-box;

Display:-ms-flexbox;

Display:-webkit-flex;

Display:-moz-flex;

Display:-ms-flex;

Display:-o-flex;

Display: flex;

}

 

Let's take a look at its attributes:
Properties
Attribute CSS Version
Version: Inherit From Parent
Inheritance Description
Introduction
Flex CSS3 does not have a composite attribute. Sets or retrieves how to allocate space for the child elements of a telescopic box object.
Flex-grow CSS3 does not set or retrieve the extended ratio of the elastic box.
Flex-shrink CSS3 does not set or retrieve the scale-in ratio of the elastic box
Flex-basis CSS3 does not set or retrieve the auto-box scaling reference value.
Flex-flow CSS3 has no composite attributes. Sets or retrieves the arrangement of child elements of a telescopic box object.
Flex-direction CSS3 does not set or retrieve the position of the child element of the telescopic box object in the parent container.
Flex-wrap CSS3 does not set or retrieve whether the child element of the telescopic box object contains a line break when it exceeds the parent container.
Align-content CSS3 does not set or retrieve the alignment of the stacked scaling row of the elastic box.
Align-items CSS3 does not set or retrieve AliCloud box element alignment in the side axis (vertical axis) direction.
Align-self CSS3 does not set or retrieve the AliCloud box element's alignment on the side axis (vertical axis.
Justify-content CSS3 does not set or retrieve the alignment of the elastic box elements in the spindle (horizontal axis) direction.
Order CSS3 does not set or retrieve the child elements of the telescopic box object? ? .
1: flex

Valid value:

Calculation value of the none: none keyword: 0 0 auto

[Flex-grow]: defines the expansion ratio of the elastic box element.

[Flex-shrink]: defines the scale-in ratio of an elastic box element.

[Flex-basis]: defines the default reference value of an elastic box element.

Here, flex-grow, flex-shrink, and flex-basis can be used separately, for example, flex-grow: 1, or together, for example, flex: 1 1 100px; it indicates that no scaling is performed, and the width is set to PX.

Let's look at a DEMO:

Each Box 400px is defined at the beginning, so the first small block is 133px. The second box (box2) has a scale-out and scale-out ratio and a reference value of 100px. Here we can calculate: 100 + 100 + 100 = 300px, but because its ID is set to PX in width, 100px is blank, but it also sets the extension ratio, so the calculation is as follows: 100*1 + 100*2 + 100*3 = 600px; finally, we can calculate the width to be increased for each small block:

First: 1*100/600*100 is approximately equal to 17px;

The second small block: 2*100/600*100 is approximately 33px;

The third small block: 3*100/600*100 equals 50px

That is to say, the width of the first part of box2 is 117px, the width of the second part is 133px, and the width of the third part is 150px;

For the same algorithm, you can try the width of box3.
2. flex-flow

Flex-flow is a composite attribute that accepts these two types of values: [flex-direction] [flex-wrap].

Let's get familiar with flex-direction and flex-wrap first.

Flex-direction is used to define the arrangement direction of the elastic box elements.

Syntax: flex-direction: row | row-reverse | column-reverse default value is row, no inheritance.

Row: horizontally arranged from left to right (left aligned), default arrangement. Row-reverse. Column: vertically arranged. Row-reverse: reverse the vertical order, from the back to the front row, and the last one to the top.

View a DEMO

Let's take a look at flex-wrap: nowrap | wrap-reverse to define whether to wrap the line when the elastic box element overflows the parent container. The default value is nowrap. Optional value: nowrap: no line breaks when the child element overflows the parent container. Wrap: automatically wrap when the child element overflows the parent container. Wrap-reverse: reverse the wrap arrangement.

Let's look at a DEMO:

Now the attributes of flex-flow are clearly defined. We can combine two to write a DEMO:
3. Check the align-content attribute again:

Align-content: flex-start | flex-end | center | space-between | space-around | stretch
Elastic box model container for multiple rows
Meaning of each attribute value:
Flex-start: each row is stacked to the starting position of the elastic box container. The start boundary of the side axis of the first line in the elastic box container is close to the start boundary of the side axis of the elastic box container.
Flex-end: each row is stacked to the end position of the elastic box container. The end and side axes of the last line in the elastic box container are close to the end boundary of the side axis of the elastic box container, and each line after the end is close to the previous line.
Center: each row is stacked in the middle of the elastic box container. Each row is aligned in the center of the elastic box container, the distance between the start content boundary of the side axis of the elastic box container and the first line is equal to the distance between the end content boundary of the side axis of the container and the last line of the container. (If the remaining space is a negative number, the rows will overflow the same distance to the two directions .)
Space-between: each row is evenly distributed in an elastic box container. If the remaining space is a negative number or there is only one row in the elastic box container, this value is equivalent to 'flex-start '. In other cases, the start boundary of the side axis of the first line is close to the start content boundary of the side axis of the elastic box container, the end boundary of the side axis of the last line is close to the end content boundary of the side axis of the elastic box container. The remaining lines are arranged in the elastic box window in a certain way, to ensure that the space between the two is equal.
Space-around: each row is evenly distributed in an elastic box container. The two ends retain half of the distance between the child element and the child element. If the remaining space is a negative number or there is only one row in the elastic box container, this value is equivalent to 'center '. In other cases, lines are arranged in the elastic box container in a certain way to ensure that the space between the two is equal, at the same time, the space at the beginning of the first line and the end of the last line is half of that of other spaces.
Stretch: each row is stretched to occupy the remaining space. If the remaining space is negative, this value is equivalent to 'flex-start '. In other cases, the remaining space is evenly divided by all rows to expand their side axis size.

Let's look at a DEMO:
4. align-items

Syntax: align-items: flex-start | flex-end | center | baseline | stretch
Meaning of each value:
Flex-start: the boundary of the start position of the side axis (vertical axis) of the elastic box element is close to the start boundary of the side axis of the line.
Flex-end: the boundary of the start 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 placed in the center of the side axis (vertical axis) of the row. (If the size of the row is smaller than the size of the element in the elastic box, the same length will overflow to the two directions ).
Baseline: if the row axis and side axis of an elastic box element are the same, the value is equivalent to 'flex-start. In other cases, this value is used for baseline alignment.
Stretch: if the value of the specified side axis size is 'auto', the value will make the size of the margin box of the project as close as possible to the size of the row, but it will also comply with the 'min/max-width/height' attribute restrictions.

DEMO:
5. align-self
Align-self: auto | flex-start | flex-end | center | baseline | stretch default value: auto
Applicable to: inheritance of child elements in the elastic box model: None
Valid value:

Auto:
If the value of 'align-self 'is 'auto', the value is calculated as the 'align-items' value of the parent element of the element. If it does not have a parent element, the calculated value is 'Stretch '.
Flex-start:
The boundary of the start position of the side axis (vertical axis) of the elastic box element is close to the start boundary of the side axis of the line.
Flex-end:
The boundary of the start 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 placed in the center of the side axis (vertical axis) of the row. (If the size of the row is smaller than the size of the element in the elastic box, the same length will overflow to the two directions ).
Baseline:
If the row axis and side axis of an elastic box element are the same, the value is equivalent to 'flex-start. In other cases, this value is used for baseline alignment.
Stretch:
If the value of the specified side axis is 'auto', the value will make the size of the margin box of the project as close as possible to the size of the row, but it will also comply with the limit of the 'min/max-width/height' attribute.
DEMO wood available
6. justify-content

Used to set or retrieve the alignment of an elastic box element in the direction of the spindle (horizontal axis.

When all the child elements in a row in the elastic box cannot be scaled or the maximum value is reached, this attribute can help allocate extra space. When an element overflows a row, this attribute is also controlled on alignment.

Syntax:

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

Default value: flex-start

Applicable to: elastic box model containers

Inheritance: None
Valid value:

Flex-start:
The elastic box elements are aligned to the starting position of the row. The boundary of the primary start position of the first child element of the row is aligned with the boundary of the primary start position of the row, and all subsequent expansion box projects are aligned with the previous project.
Flex-end:
The elastic box elements are aligned to the end position of the row. The boundary of the primary end position of the first child element of the row is aligned with the boundary of the primary end position of the row, and all subsequent expansion box projects are aligned with the previous project.
Center:
The elastic box elements are aligned to the center of the row. The child elements of the row are aligned and centered in the row, at the same time, the margins of the first element and the primary start position of the row are the same as those of the last element and the primary end position of the row (if the remaining space is negative, it will keep the overflow of equal length at both ends ).
Space-:
Elastic box elements are evenly distributed in rows. If the leftmost space is a negative number, or the row has only one child element, the value is equivalent to 'flex-start '. In other cases, the boundary of the first element is aligned with the boundary of the primary start position of the row, and the boundary of the last element is aligned with the margin of the primary end position of the row, the remaining expansion box items are evenly distributed, and the blank space between the two is equal.
Space-around:
The elastic box elements are evenly distributed in the row, and the two ends retain half of the spacing between the child element and the child element. This value is equivalent to 'center' if the leftmost space is a negative number or the row has only one telescopic box project '. In other cases, the expansion box items are evenly distributed, and the blank space between the two is equal, at the same time, the space before the first element and the space after the last element are half of the space of other blank spaces.
DEMO;

7. order

Used to set or retrieve the child element output of an elastic box model object? ? .

Usage: order: <integer>

<Integer>: An integer is used to define the order. A small value is placed first. It can be a negative value.

DEMO:

The basic syntax of flexbox and the use of some attributes are described above. Here we will learn more about the expansion box layout (elastic box) through actual practice)
We know that the CSS3 elastic box is a layout that ensures that elements have proper behavior when pages need to adapt to different screen sizes and device types. For many applications, the elastic box has been improved in two aspects compared with the box model. It does not use floating, it does not collapse between the margin of the elastic box container and the margin of its content.
Now let's review the concept of elastic box:
In the definition of the elastic box layout, it can automatically adjust the height and width of sub-elements to well fill the available display space in any display device, and shrink the content to prevent content overflow.

Unlike the vertical and in-row layout based on the horizontal direction of the box layout, the algorithm of the elastic box layout is independent of the direction. Although the box layout works well on the page, however, its definition is insufficient to support the reference components that need to be switched, adjusted, stretched, or shrunk based on the user agent's vertical switch to horizontal and other changes. Unlike the grid layout to be displayed, the elastic box layout is more suitable for application components and small scale layout. These two are the efforts of the CSS working group to collaborate with different user agents, different writing modes, and other elasticity needs.

We can use display: flex and display: inline-flex to create an elastic box. The flex value indicates that the elastic container is block-level. The inline-flex value indicates that the elastic container is an atomic row-level element. The element is called an elastic child element.
Notes for using elastic sub-elements
Text contained in an elastic container automatically becomes an anonymous elastic sub-element. However, the blank auto-child element is not rendered, as if it was set to display: none.

The absolute positioning sub-elements of the elastic container will be located, so the static position of the sub-elements will start from the corner of the main starting content box of their elastic container.

Currently, due to a known problem, visibility: collapse is specified on the elastic sub-element.
This operation may make the element seem to have the same effect as the specified visibility: hidden. We recommend that you use visibility: hidden before solving this problem. The effect of visibility: collapse is equivalent to that of the elastic sub-element.

The outer margin of the adjacent elastic child elements is not merged. Using the auto margin brings additional space in the vertical and horizontal directions, which can be used to align or separate adjacent auto subelements. The W3C elastic box layout model uses the 'auto' margin for alignment. More information is available.
The alignment of the elastic box is actually centered, unlike other CSS center methods. This means that the child element remains centered even if the elastic container overflows. In some cases, this problem may occur. However, even if the top or left side of the page overflows (the language from left to right is like English; this problem occurs in the right-to-left language along the right side, such as Arabic), because you cannot scroll there, even if there is content! In future versions, alignment attributes will be extended to a "security" option. Currently, if you are concerned about this problem, you can use the margin to center the problem. This method is "safe" and will stop living in case of overflow. Apply the automatic margin to the auto child element you want to center to replace the align-attribute. Apply the automatic margin on the outside of the first and last child elements of the elastic container to replace the justify-attribute. The automatic margin is scaled and the remaining space is assumed. If there is any remaining space, the auto-child element is centered. If there is no remaining space, the switch will be in normal alignment mode. However, if you want to replace the justify-content attribute with a margin-based center in a multiline elastic box, you may not be so lucky, because you need to apply the margin on the first and last elements of each line. Unless you can predict in advance which element is the last element on which line, you cannot stably replace The justify-content attribute with a center based on the margin on the main axis.

Although the display sequence of elements has nothing to do with the order in the source code, this is only effective for the display effect, excluding the voice sequence and source code-based navigation. Even order does not affect the language and navigation sequence. Therefore, developers must carefully arrange the elements in the source code to avoid damaging the accessibility of documents.
Here are two examples:

The example shows how to apply the elastic layout of elements and the behavior of neutron elements in the elastic layout.

Example 2

This example applies to scenarios where desktop browser web pages must be optimized to adapt to smartphone screens. Not only do elements need to be reduced in size, but their order must also be changed. Elastic layout can easily meet this requirement.