A thorough understanding of Flexbox

Note: This article is translated from Chris Coyier's a complete guide to flexbox this article, click the link to go to the original blog: https://css-tricks.com/snippets/css/ a-guide-to-flexbox/
tips:this Tutorial is translated from the very popular? article in Css-tricks- Flexbox, posted by CHRIS Coyier. Follow this link to see the original:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
The Flexbox layout is designed to provide a more efficient way to lay out, align, and allocate space for the elements of a container, even if their size is unspecified or dynamically changing, and can be adapted well. The rationale behind the
Flexbox layout is to give the parent container the ability to change the height (or order) of the child elements to better populate the available space (primarily to accommodate a variety of display devices and screen sizes). A parent container that uses the Flexbox layout stretches each child element to fill the available space, or compresses them to prevent the parent container from being exceeded.
Most importantly, the Flexbox layout is unpredictable in the direction, which is different from the normal layout (the blocks in the general layout are arranged vertically, and the inline is based on the horizontal direction). These regular layouts are fine on the page, but they are inflexible and difficult to support the needs of large, complex applications, especially response direction, size, stretching, shrinkage, and so on.
Note: The Flexbox is best suited for components and small-scale layouts, and a more complex layout makes the grid layout better.
Since Flexbox is a complete module, it is not just a property, it contains a whole new set of properties, so there are a lot of new things involved. Some of these properties are used to set the parent container, while others are set to child elements. The
set properties for the parent container are:

display: Flex | Inline-flex;
flex-direction: Row | Row-reverse | Column | Column-reverse;
flex-wrap: nowrap | Wrap | Wrap-reverse;
flex-flow: @flex-direction @flex-wrap;
justify-content: Flex-start | Flex-end | Center | Space-between | Space-around;
align-items: Flex-start | Flex-end | Center | Baseline | Strtch;
align-content: Flex-start | Flex-end | Center | Space-between | Space-around | Stretch

The properties for setting child elements are:

order: number;
Flex-grow: number; /* Default 0 */
Flex-shrink: number; /* Default 1 */
flex-basis: number | Auto /* Default Auto */
Flex: none | @flex-grow @flex-shrink @flex-basis;
align-self: Auto | Flex-start | Flex-end | Center | Baseline | Stretch

The above is a summary of attributes, and we'll cover them all: display

The display property is used to define a container for a flex layout, whether the container itself is inline or block, depending on whether the display value is Flex or Inline-flex. Once flex is declared, the immediate child elements under the container are subject to the management of the flex layout.
It is important to note that the multi-column layout in CSS does not affect the container of the flex layout.
Here we define a parent container and several child elements that declare the flex and Inline-flex styles for the parent container, respectively:

. Parent {
    background: #88499C;
}

. Child {
    margin:10px;
    padding:10px;
    Background: #E77F24;
    Text-align:center;
    Color:white;
    Overflow:hidden;
}

. Parent.flex {
    display:flex;
}

. Parent.inline-flex {
    display:inline-flex;
}

Here is the HTML content:

 
In the code above, the first parent container uses the Flex style, the second uses the Inline-flex style, and now let's look at the difference between Flex and Inline-flex:

When you use Flex, the parent element is a block element, and the parent element that declares Inline-flex becomes an inline element. flex-direction

The Flex-direction property is used to create a spindle that specifies the direction in which the child elements are arranged. Flexbox is a one-way arrangement of layout concepts, unless we use the Flex-wrap attribute extra. The child elements inside the flexbox are either lined horizontally or in a vertical direction.
Commonly used are flex-direction:row and flex-direction:column, while Row-reverse and column-reverse can be literally seen as the opposite of the first two directions.
By default, it is a row from left to right, which is flex-direction:row.
Now let's declare a flex-direction style for the parent container:

. parent.flex-direction-column {
    flex-direction:column;/* row | row-reverse | column | column-reverse */
}
 
 
The arrangement effect is as follows:
Flex-wrap

As we also mentioned above, by default, Flexbox arranges child elements in one direction, but we can also declare flex-wrap to change this rule, allowing some child elements to be arranged on the next line.
By default, the value of the Flex-wrap property is nowrap, and we can declare wrap and wrap-reverse to change it. It is important to note that the direction of wrap and Wrap-reverse is associated with the flex-direction and should be used flexibly.
Now let's add the CSS style and then use it in HTML:

. parent.flex-wrap {
    flex-wrap:wrap;/* nowrap | wrap | wrap-reverse */
}
 
 
The display effect is shown in the following figure:

As you can see, by default, the container compresses the child elements so that they remain on one line, and if Flex-wrap:wrap is added, it does not force the child elements to be in the same row, but to start from the next line. Flex-flow

The Flex-flow property is shorthand for flex-direction and flex-wrap, such as the Flex-direction:row and flex-wrap declarations above, which we can represent with only one property:Flex-flow: Row wrap;

With so many attributes of the parent container, it is also time to introduce the attributes of the element to the parent container. Order

By default, child elements within Flexbox are listed in the document declaration order, but we can use the Order property to control the order in which child elements appear in the parent container. By default, the order value is 0.
Below we define the two order values for the child elements, and then apply them in the HTML:

. child.order-negative-1 {
    Order:-1;
}

. child.order-positive-1 {
    order:1; 
}
 
 
The first child element has an order of 1 and the last child element order is-1, so in theory, the last child element and the last child element should be swapped for the position, and the second child element uses the default value of 0, so it is in the middle position.
The following diagram confirms our inference:
Flex-grow

The Flex-grow property gives the child elements the ability to stretch as necessary, specifying a number without a unit, as a percentage of the remaining space of the parent container, which indicates how much space the child element can allocate in the Flex container.
If all child elements that declare Flex-grow are assigned Flex-grow to 1, then the remaining space of the parent container will be evenly allocated to those child elements. If one of the Flex-grow is specified as 2, the container will attempt to allocate a space of twice times the child elements that are flex-grow to 1.
It is important to note that the remaining space we say refers to the free space of the parent container in addition to the content of the child element, and the parent container does not guarantee that it will be evenly distributed in all cases, but at least it attempts to do so. The value of the flex-grow cannot be negative.
Now let's declare the Flex-grow property for the child element and apply it to the HTML document:

. child.flex-grow-1 {
    flex-grow:1;
}

. child.flex-grow-2 {
    flex-grow:2;
}
 
Flex-shrink

The Flex-shrink property indicates whether a child element shrinks itself to fit the current flexbox if necessary, and the default value is 1. Note: The flex-shrink cannot be negative.
Flex-shrink is suitable for a fixed-size child element, by default, a fixed-size child element is not always a set value, such as in the parent container is too small, it will compress the child elements to adapt, if we do not want these child elements are compressed, you can use Flex-shrink, and set its value to 0.
Let's set the last child element width to 300px and then add the flex-shrink:0 style to it to see how flex-shrink controls the child elements:

. child.flex-shrink-0 {
    flex-shrink:0;
}
 
 
Now let's look at the differences before and after adding Flex-shrink:

Note that in the first view above, the current width of the last child element is not 300px, because the parent container width is too small to force the width of each child element, so although the last child element is set to width, it is also affected. In the second view, the last child element still retains its width and is not compressed because it declares flex-shrink:0. flex-basis

The Flex-basis property tells the parent container to set the default dimensions of the sub-elements before the remaining space is allocated, which can be specified as a percentage or REM, such as a length unit or the Auto keyword. If set to 0, the default size of each child element is treated as 0, and the remaining space is the total space of the parent container, and the result is that the overall size of the child element is allocated directly according to the Flex-grow value, if the parent container allocates the allocation. The parent container then takes the contents of each child element as the default size of the child element, then calculates the remaining space, and finally distributes the remaining space evenly to the Flex-grow value, which is the "padding", except for the content of the child element. Let's take a look at the following picture (Image source: https://www.w3.org/TR/css-flexbox-1/images/rel-vs-abs-flex.svg):

The first view child element in the diagram declares flex-basis:0, so the parent container allocates space for the overall size of each child element according to the scale of the Flex-grow value. The second view is different, and the child element declares the Flex-basis:auto, so the parent container allocates the content space of each child element first, and then allocates it for the rest of the space except for the content, and then flex-grow the ratio of each child element.
As mentioned in Flex-grow, how to use flex-basis:0 to allocate all the space of the parent container proportionally to each child element, let's add the flex-basis:0 attribute for each child element:

. child.flex-grow-1 {
    flex-grow:1;
}

. child.flex-basis-0 {
    flex-basis:0;
}