preface

This is the third article in the CSS layout series. The first two articles covered CSS layout concepts and the three box-model layouts. Article links can be poked here:

• CSS Layout (1)
• CSS Layout (2)

This article will introduce a new layout approach: the Flexbox layout model. This layout is more flexible than the previous conventional layouts and is widely used in large or complex applications. Because of its flexibility, a single attribute cannot necessarily hold flexbox. Therefore, the Flexbox layout model is a relatively complete module. This module defines the content for Flexbox.

What is flex-box?

Needless to say, flex-box is definitely a layout. With this layout, even if you don’t know the size of the window and the size of the element, you can flexibly adjust the size of the element and the size of the window to fit both. Wow, that’s such a mouthful, it’s a pain to watch. Don’t panic. Next, we’ll explain a wave by comparing it to the standard box model.

Elastic box layout model VS box layout model

As we know, the layout pattern of the standard box model determines how the browser will render HTML elements into the Web page by determining the size and location of the box model. For example, the previous article introduced block-boxes and inline-boxes. They are rendered in the order of the HTML elements, where the size of each element is specified by the CSS attribute. One by one on the web page. For standard document streams, the relevant CSS properties determine the size of block boxes and inline boxes; Their default rendering rules determine their respective positions. Both the position and the size are fixed and immutable. As a result, the standard box model layout has very little flexibility, and if you change the size of the window a little bit, the whole layout can be messed up. In contrast to the standard box model layout, the elastic box layout model is more flexible. Its flexibility is due to its description rules. Flexbox does not describe the size and dimensions of the box model, but rather an elastic layout feature. The elastic box layout model consists of two parts:

• Flex Container: Parent element
• Flex Item: child element

Flexbox describes the relative position of the parent and child elements, and does not specify their size. As a result, flexibility is greatly improved.

Start using Flexbox

Triggering the Flexbox layout is simple. Just set up a parent-nested HTML element structure and declare display:flex on the parent element. That will do. Let’s take a simple list of items:

• HTML:

 <ul>           <! -- parent element -->
    <li></li>   <! -- the first child -->
    <li></li>   <! -- the second child -->
    <li></li>   <! -- third child -->
</ul>  
Copy the code

• CSS:

ul {
    display: flex;   /* 或者：inline-flex */
    border: 1px solid #8cacea;
}  

li {
    width: 100px;
    height: 100px;
    background-color: #ccff33;
    margin: 10px;
    list-style: none;
}
Copy the code

The final display result is shown as the figure below:Obviously, if you don’t adddisplay:flex;An unordered list should be arranged from top to bottom. Therefore, we have successfully triggered the Flexbox layout.

Some concepts in Flexbox

As with the box model, let’s first look at some concepts related to The Flexbox. The flexbox model is shown below:Related concepts are divided into the following five groups:

• Flex container/Flex project: The Flex container is the starting point for the Flex layout, which is set updisplay:flex;The element; A Flex project is a direct child of a Flex container.
• Spindle/side axis: In flex layouts, it is important to have a pair (two) of opposite concepts that indicate how flex-items are arranged in flex-Containers. The two concepts are the principal axis and the lateral axis. Flex-items are arranged in the direction of the main axis. When we specify which axis is the principal axis, the lateral axis is determined accordingly.
• Main direction/side direction: The main direction and side direction are the directions in which the main axis and side axis extend respectively, i.e. the positive direction of the main axis and side axis
• Main axis start/main axis end/Side axis start/side axis end: In a Flex layout, the main axis and side axis are relatively fixed in length.
• Spindle length/side axis length: Obviously these two concepts refer to the length of the container along the spindle and side axis respectively.

Flex-box related properties

As mentioned earlier, the elastic box layout model is a complete module. Since it is a module, there are not one or two properties associated with the elastic box layout, but many. So many attributes apply to the parent element (Flex-Container) and the child element (flex-item). They specify the alignment, dimension and orientation.

The parent element (flex – container)

The following attributes apply to the parent element:

• Direction: flex – flow – > flex – direction | | flex – wrap
• Alignment:
  • place-content -> align-content || justify-content
  • align-items
• Size: gap – > row – gap | | colomn – gap

Direction (direction)

There are two properties that define the direction of Flexbox: flex-direction and flex-wrap. Where, flex-direction defines the direction of the main axis, that is, the alignment direction of neutron elements in Flex-Container. Flex-wrap defines whether elements in flex-Container are newlines. Flex-flow is a shorthand pattern for two separate properties.

• Flex-direction: This property takes four arguments: row, row-reverse, column, and column-reverse. Means that the axis direction is the X-axis direction, the X-axis direction, the Y-axis direction, and the Y-axis direction. Row is the default value for the Flex-direction property.
  • Set the flex-direction value to row or not:

  

  • Set the flex-direction value to row-reverse:

  

  • Set the flex-direction value to column:

  

  • Set the flex-direction value to column-reverse:

  

• Flex-wrap: This property has three parameter values: nowrap, wrap, and wrap-reverse. Controls whether flex-item elements that exceed the flex-Container’s capacity are newlined, respectively. Nowrap means no line feeds and is the default value for this property; Wrap: newline; Wrap-reverse indicates a newline, and the order of the elements’ rows is reversed.
  • Set the flex-wrap value to nowrap:

  

  • Set the flex-wrap value to wrap:

  

  • Set the value of flex-wrap to wrap-reverse:

  

In addition to these two attributes that affect the arrangement of neutrals in a container, there are two attributes that affect the arrangement of elements: write-mode(HORIZONtal-TB, vertical-rL, vertical-LR) and Direction (LTR, RTL). These two attributes affect the arrangement of flex-items by influencing how the text is set up. Because different languages have different typography, they require different Flex layouts.

Alignment (alignment)

There are three properties that determine flex-Item alignment. According to the flex-box concept, there is a main axis and a side axis; From the point of view of the CSS box model, a Web page has a horizontal X axis and a vertical Y axis. In any case, there should be two attributes that control the arrangement of elements for each axis. Isn’t it? So why is there an extra property here? The reason for this is that of the three attributes, one controls the axis alignment (justify-content) and two controls the side axis alignment (align-content, align-items). So, again, why are there two properties that control the alignment of the side axes? The two properties that control the alignment of the side-axes are the alignment-items for single-line elements and the alignment-content for multi-line child elements. The property that controls the alignment of multiple lines and the property that aligns the spindle can be abbreviated as place-content.

• Place-content: This shorthand property includes the properties justify-content and align-content. They control how elements are arranged in the Flex-Container and the spacing between child elements
• Align-items: This property controls the alignment of single-line elements, either by alignment to that reference or by stretching elements of different heights to ensure that they are of the same height.

Let’s look at the values of these three properties:

• Attribute values shared by the three attributes:
  • flex-start
  • flex-end
  • center
• Inter-content and align-content share the following attributes:
  • space-around
  • space-between
• Align-content and align-items have common values:
  • stretch
• Inter-content attribute values:
  • space-evenly
• Align-items unique attribute values:
  • baseline

Size (size)

The sizing attribute is used to set the spacing between child elements in the container. An alternative is to set the margin attribute on the child elements, but using the margin attribute creates unnecessary spacing.

• Effect of using gap:

• Effect of using margin:

It is easy to see the difference between the two displayed effects. Using margin, each element should be twice as spaced as the gap, and there should be a space between the container and the element. Obviously, the extra spacing is what was mentioned earlierUnnecessary interval

Child elements (flex – item)

Attributes that apply to child elements also include orientation, size, and alignment:

• Direction: order – Determines the position of the child elements by determining their order
• Size: flex – > flex – frow | | flex – the shrink | | flex – basis – a complete set of calculation rules, introduced in the next section
• Alignment: align-self – the alignment of individual child elements, similar to that of align-items, but for individual child elements

Flex-item width calculation method

The flex-item width calculation is related to flex-grow, flex-shrink, and flex-basis attributes. Before explaining how these three properties are evaluated, it is important to understand two concepts: the flex container has free space and the Flex container has insufficient space.

• Flex container space: The space left after the Flex child elements have been placed
• Flex container out of space: The flex container is not wide enough and the child elements are beyond the container

The pair of the two is shown in the following figure:Of the three attributes related to the width of the child element, flex-grow is for remaining space, flex-shrink is for insufficient space, and Flex-basis is more complex than either. Flex-basis and Flex-item are related to content, width, min-width, and max-width.

flex-grow & flex-shrink

First, let’s look at the values of these two attributes:

• The flex – turns: 0 | | number
• The flex – the shrink: 0 | | number

By default, flex-grow is 0 and Flex-shrink is 1. From their values, we can see that both of these attributes represent the scale of a child element. Here’s how they did it:

• The flex – turns up:

• The flex – the shrink:

Following the formulas for calculating the two properties are the rendering rules for flex-Item. About this problem, a flowchart of the desert teacher has shown very clear, I will be a porter:

flex-basis

The flex-basis attribute displays results related to width, max-width, and min-width. There is a clear hierarchy between them. We continue through a flowchart of the desert teacher to explain:The hierarchy is obvious from the diagram: flex-basis -> width -> content. Then, each level is compared to min-width and max-width. The best fit from these values. In summary, there are three levels, and if a maximum and minimum values are set, two comparisons are made.