Author: Desert

Flexbox layout has become one of the most popular Web layout methods. It gives Web developers great flexibility and convenience in completing the UI layout of a page or component. But also because it’s so flexible, it hides a lot of details, many of which would be missing if you weren’t very familiar with the Flexbox or its specifications, and these details can be confusing or even troublesome.

This time, while optimizing imgCook’s Flexbox layout, I re-read the Flexbox specification and realized that I had overlooked some important information. For this reason, in this article, Flexbox layout, CSS writing mode, logical properties, alignment together to organize a note, I hope for the students who want to know or use Flexbox encountered pain.

Some terms and concepts

Flexbox term

The unity of terms will help us to better discuss and solve the problem later. To describe the terms in Flexbox:

The concept of Axis and side Axis is only found in the Flexbox layout, not always Main Axis in the horizontal direction and Cross Axis in the vertical direction. In addition to Flexbox’s flex-direction value, the main and side axes are affected by CSS writing mode and direction, and by HTML’s dir attribute!

Block shaft and inline shaft

CSS Box Alignment Module Level 3 introduces two new concepts, namely Block Axis and Inline Axis:

  • A block axis is an axis that extends in the direction of the layout of blocks (such as paragraph elements) vertically across the inline axis

  • The inline axis is the axis along which the words of a sentence flow when using a particular writing pattern. For example, in English or Chinese, the inline axis is horizontal

Block axes are also called columns and Inline axes are also called rows:

Although the Flexbox specification and Grid specification have their own description of Alignment so far, the CSS will close the Alignment into the Box Alignment module; Since then, the expression of axis is more like “block axis” and “inline axis”. Combined with the Flexbox layout, the axis correspondence is:

  • The Inline Axis also corresponds to the Main Axis in Flexbox

  • Block Axis also corresponds to Cross Axis in Flexbox

The block and inline axes are also affected by the writing mode writing-mode and direction of CSS and the DIR attribute of HTML. However, in the Flexbox layout, it is also affected by the Flex-direction property.

Writing mode

The Writing Modes Level 3 specification’s writing-mode and direction, as well as the HTML’s dir attribute, have an effect on the axis and side axes in Flexbox, changing the direction of the axis and side axes.

Logical properties

After the emergence of Block axes, Inline axes, and writing modes, we have Block Start, Block End, Inline Start, and Inline End:

If you put it in the Flexbox layout:

  • Inline Start is the same as Main Start in the Flexbox layout.

  • The Inline End is the same as the Main End in the Flexbox layout.

  • Block Start is equivalent to Cross Start in the Flexbox layout.

  • Block End is equivalent to Cross End in Flexbox layout

The CSS Logical Properties and Values Level 1 specification also introduced block-start, block-end, inline-start, and inline-end, but they and Flexbox, Flex-start, start, flex-end, and end in a Grid with Box Alignment are not equivalent or in the same domain. These properties correspond to the physical properties top, right, bottom, and left:

In other words, after the introduction of CSS logical properties, the CSS box model will be divided into physical box model and logical box model:

CSS properties are then divided into logical and physical properties:

Note that the CSS logical properties are also affected by the CSS writing mode writing-mode, directioin property, and THE HTML dir property, and are different in different combinations:

Remaining space (available space) and insufficient space

In a Flexbox layout module, a Flex container may contain one or more Flex projects. The Flex container and Flex project each have their own size, so there will be situations where the sum of the Flex project sizes is greater than or less than the Flex container:

  • When the sum of all Flex project sizes is less than the Flex container, the Flex container has excess Space that has not been filled. This Space is called Positive Free Space in the Flex container.

  • When the total size of all Flex projects is larger than the Flex container, there is not enough Space in the Flex container for all Flex projects (Flex projects overflow the Flex container), and the extra Space is called Negative Free Space, also known as Negative Space

Flex containers and Flex projects

Using display on an element to set the value to Flex or inline-flex, the container becomes a Flex container, and the child elements under the container, including text nodes, pseudo-elements.

Specific scenarios for using Flex and inline-Flex:

If the element explicitly sets the value of display to flex or inline-flex, the Flex project will size itself according to its content size without explicitly setting the resizing-related properties.

  • Display: Flex when the Flex container does not explicitly set width-related properties, its width is the same as its parent (equivalent to width: 100%).

  • When set to display: inline-Flex, the width of the Flex container is equal to the sum of the widths of all Flex items when the width-related properties are not explicitly set

When all Flex projects in the Flex container are wider than the Flex container:

  • When set to display: flex, flex projects overflow the Flex container

  • When set to display: inline-flex, the Flex project expands the Flex container, potentially causing the Flex container to overflow its parent (or ancestor) element.

Use display: inline-flex in combination with min-width and min-height. Explicit width and height Settings are not recommended.

When display is set to Flex, the Flex container behaves like a block container. In fact, it is a Flex container, and the context format is FFC. As a result, some of the layout attributes used in Block Formatting Content no longer apply. For example:

  • The COLUMN -* CSS property has no effect on Flex containers

  • The FLOAT and clear properties of CSS do not work on Flex projects and do not take the Flex project out of the document flow

  • The vertical-align property of the CSS does not work on Flex projects

  • CSS pseudo-elements ::first-line and ::first-letter do not work on Flex containers, and Flex containers do not provide first-line or first-letter formatting for their ancestors

One thing to note is that if the element’s display value is inline-flex and the element explicitly sets float or position to relative, Absolute, or fixed, The value of display is calculated to be flex, which means the Flex container behaves the same as display: flex.

Apply properties on the Flex container

Specify spindle direction

Using flex-direction explicitly in a Flex container allows you to specify the principal axis direction. If the flex-direction property is not explicitly set, the Flex container uses its default value row.

The figure above shows only that the reading mode is LTR(Left to Right). Without a special declaration, the following document does not list different diagrams based on the reading mode (i.e. the CSS writing mode, direction, and HTML dir properties).

You need to explicitly set Flex-Directioin on the Flex container unless you need to explicitly change the main direction, such as this:

flex-direction: column

Row-reverse is the opposite of the default row representation and applies to layout scenarios like this:

In the Flexbox layout, flex-direction also has an effect on the order in which Flex projects are arranged when specifying the main axis of the Flex container (ideal for reverse layout without changing the DOM structure). In addition to flex-direction, which affects the order of Flex projects, it is also possible to explicitly use the Order attribute in Flex projects, and you can order them according to any intent you want without affecting the DOM structure.

Currently, when using the Flexbox layout in IMGCook, the flex-direction value is explicitly set on the Flex container, even though the default value is row. In layout algorithm optimization, you can do the following by explicitly setting flex-direction on the Flex container only when it is not row:

Control whether a Flex project is newline (Flex line)

Use flex-wrap to control how flex projects wrap lines in the Flex container:

Setting the Flex-wrap property takes effect only if the combined width of all Flex projects is greater than the Flex container spindle size.

Flex-wrap values that are not nowrap (i.e., wrap and wrap-reverse) make a Flex item explicitly newline (column), where wrap-reverse behaves the opposite of wrap.

Combined effect

Your performance

Results 1

Results 2

The effect of 3

The effect of 4

The effect of 5

Results 6

Results 7

Results 8

Flex-direction and flex-wrap can be shortened to flex-flow. Flex-flow can be used with only one explicit value or two explicit values:

  • Flex-flow is explicitly set to only one value, and flex-wrap is initial when it matches

  • Flex-flow explicitly sets only one value, and flex-direction is initial when it matches

  • Flex-flow When flex-direction and flow-wrap are explicitly set, flex-flow: column wrap is the same as flex-flow: wrap column

Axis alignment

Use the text justify in the Flex container to control the alignment of Flex projects in the main axis of the Flex container. It can also be used to allocate the remaining space in the Flex container in the main axis direction. The use of justify-content is used to allocate the remaining space of the Flex container to both sides of the Flex project in a different alignment.

Inter-content exists in two specifications:

  • CSS Flexible Box Layout Module Level 1

  • CSS Box Alignment Module Level 3

In the Flexbox layout module, you can use the following six values:

Note the difference between space-between, space-around, and space-evenly:

  • Space-between aligns the box starting edge of the first Flex project with the starting point of the Flex container spindle, the box ending edge of the last Flex project with the end point of the Flex container spindle, and the other adjacent Flex projects are equally spaced. When there is only one Flex project in the Flex container, it behaves the same as Flex-start

  • Space-around causes the box start edge of the first Flex project to be the same distance as the starting point of the Flex container spindle and the box end edge of the last Flex project to be the same distance as the end point of the Flex container spindle and equal to half the distance between the other two adjacent Flex projects. When there is only one Flex project in the Flex container, it behaves the same as the Center

  • Space-instituted will make the start edge of the box of the first Flex project equal to the start distance of the Flex container spindle and the end edge of the box of the last Flex project equal to the end distance of the Flex container spindle and equal to the spacing between two other adjacent Flex projects. When there is only one Flex project in the Flex container, it behaves the same as the Center

If the Flex container does not have extra space, or if the space is negative, the value of justify-content is expressed as:

  • Flex-start causes flex projects to overflow at the end point of the Flex container spindle

  • Flex-end causes the Flex project to overflow at the start of the Flex container main shaft

  • Center causes Flex projects to overflow on both sides of the Flex container

  • Space-between is the same as flex-start

  • Space-around is the same as center

  • Space-evenly and Center are the same

In the Flexbox layout, you can use these properties to control the remaining Flex container space, such as:

Lateral axis alignment

Use align-items in the Flexbox container to control the alignment of Flex items along the side axis.

The default value for align-items is stretch, but only if the Flex project explicitly sets its height (or width) value will the Flex project be stretched to fill the entire Flex container.

If Flex container has no free space or free space is negative:

  • Flex-start causes the Flex project to overflow at the end of the flex container side axis

  • Flex-end causes the Flex project to overflow at the start of the flex container side axis

  • Center causes Flex projects to overflow on both sides of the Flex container side axis

  • Baseline will cause Flex projects to overflow at the Flex container end point, similar to Flex-start

Multi-row (column) alignment

Align-content only applies to Flex containers where there is not enough space (the combined width of all Flex items is greater than the Flex container spindle size) and the flex-wrap value is explicitly set to non-wrap.

Align-content behaves a bit like justify-cotent, which controls how Flex items are aligned on the main axis (allocating the remaining space in the main axis of the Flex container), while align-content can be used to control multiple lines. Alignment of rows on the Side axis of the Flex container (allocate the remaining space on the side axis of the Flex container). You can think of the entire line in the side axis in the align-Content state as a single Flex project in the justify-content state.

The align-content is a little different, with an extra stretch. When the total size of all rows in the Flex container is greater than the Flex container side axis size (there is no available space on the Flex container side axis or the available space is negative), the values behave as follows:

  • Flex-start causes the Flex container’s rows to overflow at the side axis end point

  • Flex-end causes the Flex container’s rows to overflow at the start of the side axis

  • Center causes Flex container rows to overflow on both sides of the side axis

  • Stretch behaves like flex-start

  • Space-around behavior is similar to center

  • Space-between behaves similarly to flex-start

  • Space-evenly behaves similar to center

Spacing (row to row, column to column)

Gap controls the spacing between Flex projects, but ignores the spacing between Flex projects and the edges of the Flex container:

Properties applied to Flex projects

Align the Flex project itself

You can use justify-content, align-content, and align-items on the Flex container to allocate space for the main and side axes of the Flex container (which controls the alignment of all Flex items in the Flex container). If you need to deal with individual Flex project alignment, you can use align-self:

The effect of taking different values of align-self:

The Flex container align-items are not overwritten when the Flex project align-self is explicitly set to auto; In addition, if you explicitly set margin to auto on a Flex project, the align-self value for the Flex project will become invalid.

In situations like the one above, align-self is useful.

Flex Project Sorting

Using Flex-direction in a Flex container allows you to arrange all Flex projects in the Flex container in the “LTR”, “RTL”, “TTB”, or “BTT” direction.

  • LTR: flex – driection: row

  • RTL: flex – direction: row – reverse

  • TTB : flex-direction: column

  • BTT : flex-direction: column-reverse

On Flex projects, you can also use order to specify a specific number to sort the Flex project without changing the DOM structure, where the larger the number, the more back:

In some cases, in addition to flex-direction, you can also set the order in the Flex project:

Flex project scaling calculation

The Flex property used in a Flex project scales itself based on the available space of the Flex container, which contains three sub-properties: flex-basis, Flex-shrink, and Flex-grow. Each of these properties has an initial value:

  • The initial value of flex-grow is 0

  • The initial value of Flex-shrink is 1

  • The initial value of flex-basis is auto

These are the three sub-properties of Flex: flex-grow, Flex-shrink, and Flex-basis. These three properties control the Flex project as follows:

  • Flex-grow: Sets the flex project expansion ratio. How much Positive Free Space will the Flex project get? That is, the Flex project is likely to grow

  • Flex-shrink: Sets the Flex project shrink ratio so that the Flex project will subtract Negative Free Space from the Flex container, so that the Flex project may become smaller

  • Flex-basis: The size of the Flex project before it is expanded or shrunk, specifying the initial size of the Flex project in the main axis

Flex properties can specify one value (single-valued syntax), two values (two-valued syntax), or three values (three-valued syntax).

Single-valued syntax: The value must be one of the following:

  • A unitless number (

    ), such as flex: 1, is treated as the value of

  • A valid width value, such as Flex: 30vw, is treated as a

    value

  • Keywords None, auto, or initial

Double value syntax: the first value must be a non-unit value, and it will be treated as the value of

; The second value must be one of the following:

  • A unitless number (

    ), which is treated as the value of

  • A valid width value, which is treated as the value of the

Three-valued syntax:

  • The first value must be an ununitless number (

    ), and it will be treated as the value of

  • The second value must be an unitary number (

    ), and it will be treated as the value of

  • The third value must be a valid width value, and it will be treated as the value of the

The Flex property can be:

  • Auto: Flex projects are sized according to their own width and height, but Flex projects scale according to the remaining Flex container space. It is equivalent to Flex: 1 1 Auto

  • Initial: The Flex project is sized according to its own width and height. It shortens itself to fit the Flex container, but does not stretch and absorb the extra space in the Flex container to fit the Flex container. It is equivalent to Flex: 0 1 auto

  • None: Flex projects are sized according to their own width and height. It is completely inelastic (neither shortened nor stretched to fit the Flex container). It is equivalent to Flex: 0 0 auto


  • : Defines the flex-grow attribute of a Flex project, with the value


  • : Defines the Flex-shrink property of the Flex project with the value


  • : Defines the Flex-basis property of a Flex project. If the value is 0, units must be added to avoid being considered scalable

The flex – turns up calculation

Flex-grow calculation formula:

Example:

Assume that there are four Flex projects in the Flex container, with the following parameters:

  • The Flex container is 80vw wide

  • There are four Flex projects in the Flex container, and each Flex project is 10VW wide

  • The sum of Flex project widths is 10VW x 4 = 40VW

  • The Flex container has 80VW-40VW = 40VW

  • The Flex -grow values for Flex projects are 0, 1, 2, and 3, and the sum of Flex -grow for all Flex projects is 0 + 1 + 2 + 3 = 6

Calculation process:

Calculated results:

Flex-grow can also be a minor value. If you change the flex-grow values in the above example to 0, 0.1, 0.2, and 0.3, respectively, the sum of flex-grow (flex-grow and flex-grow for all Flex projects) is 0.6, which is less than 1. At this point, the Flex project will also split up the rest of the Flex container based on the Flex-grow factor. The Flex itself will become wider, but the Flex container will not be fully divided because all flex-grows are less than 1. In this example, only 60% of the remaining width of the Flex container is divided.

If flex-grow and is less than 1, the formula is as follows:

Even if all Flex projects in the Flex container have flex-grow and more than 1, it is not absolute to say that Flex projects can split the remaining Flex container space according to their own flex-grow ratio. Because the size of the element is affected by max-width. When a Flex project explicitly sets the max-width value, the Flex project will use the max-width value if the flex-grow width is greater than the max-width value. For example, in the previous example, set all Flex projects to a max-width of 18vw, and the calculation results are as follows:

At this time, the Flex container is not completely used up, 40VW-0VW-6.667 VW-8VW-8VW = 17.333VW, that is, the Flex container has 17.333VW left.

If the Flex project has no explicit width-related properties (including Flex-basis) set, flex-grow calculates the Flex project by the width of its contents.

It can be seen from the figure above:

  • The width of the Flex container is 804px

  • The Flex project widths are 43.36px, 92.09px, 140.83px, and 189.56px. The total width of all Flex projects is 465.84px

  • The remaining width of the Flex container is 804px – 465.84px = 338.16px

  • The flex-grow value for all Flex projects is 1, or the total flex-grow value for all Flex projects is 4

Applying the corresponding value to the flex-grow formula yields:

Note that different browsers handle decimals differently.

The flex – the shrink computing

Flex-shrink calculation formula:

Example:

Assume that the Flex container has four Flex projects with the following parameters:

  • The Flex container is 40VW wide

  • There are four Flex projects in the Flex container, and each Flex project is 15VW wide

  • The sum of Flex project widths is 15VW x 4 = 60vw

  • The Flex container has insufficient space of 40VW-60VW = -20VW

  • The flex-shrink values for Flex projects are 0, 1, 2, and 3, and the sum of flex-shrink for all Flex projects is 0 + 1 + 2 + 3 = 6

Calculation process:

Calculated results:

There is even another formula for flex-shrink:

Flex-shrink is similar to flex-grow in that it can be used as a small value. If Flex shrink is less than 1 for all Flex projects in the Flex container, the Flex container’s insufficient space will not be consumed by Flex projects according to the shrink factor, and Flex projects will still overflow the Flex container.

If the sum of Flex-shrink is less than 1, the formula is as follows:

Based on the example above, set Flex -shrink to 0, 0.1, 0.2, and 0.3 for the Flex project.

Even if Flex shrink is greater than 1 for all Flex projects in the Flex container, it is not an absolute statement that Flex projects can divide up insufficient Flex container space according to their own flex-shrink ratio. Because the element size is affected by min-width. When the Flex project explicitly sets the value of min-width, the Flex project will use the value of min-width if the Flex project is calculated to be less than min-width based on Flex-shrink. For example, in the previous example, we set min-width to 10vw for all Flex projects, and the calculation results are as follows:

In this case, the final width of the Flex project will still be greater than the width of the Flex container, and the Flex project will also overflow the Flex container.

Flex-shrink is also similar to flex-grow in that when width-related properties are not explicitly set for flex projects in the Flex container, the initial width of the Flex project is calculated against the width of its contents.

Flex-shrink differs slightly from flex-grow. If the new width of a Flex project calculated by Flex-shrink tends to 0, the Flex project will set the width to the min-content of the element. At the same time, this width will be transferred to other Flex projects, which will be shrunk by the corresponding shrink factor.

For example, we changed the flex-shrink value for the fourth Flex project from 3 to 9. According to the formula provided above, the new width of Flex project 4 is equal to 15vw – (20vw ÷ 12) × 9 = 0

The calculated width is 0, but the actual rendered width at this point is the min-content of the project (in this case, the width of the “shrink” word, as shown below), which is about 47.95px (about 3.66vw). The value is then divided into three parts (because fleke-shrink for the other three Flex projects in this example is 0, 1, and 2), and the corresponding Flex project continues to assign the width that should have been shrunk by Flex project 4. That is:

  • Flex Project 1 new width = 15VW-20 ÷ 12 × 0-3.66 ÷ 3 × 0 = 15VW (approx 196.5px)

  • Flex Project 2 new width = 15VW-20 ÷ 12 × 1-3.66 ÷ 3 × 1 = 12.113vw (approx. 158.6847px)

  • Flex Project 3 new width = 15VW-20 ÷ 12 × 2-3.66 ÷ 3 × 2 = 9.227vw (approx. 120.869px)

The rendering of the browser window width at 1310px looks like this:

In the Flexbox layout module, based on the Flex container alignment properties mentioned earlier, flex-shrink and Flex-grow in the Flex project, we can handle the remaining and insufficient space of the Flex container very well:

  • The Flex container has free space (the total width of all Flex projects is less than the width of the Flex container). If flex-grow is set, the Flex project allocates the remaining Flex container space based on the expansion factor. Is alignment set in the Flex container when flex-grow is not set? If yes, the remaining flex container space is allocated according to alignment. If no, the remaining Flex container space remains unchanged

  • The Flex container has insufficient space (the total width of all Flex projects is greater than the width of the Flex container). If you set flex-shrink to 0, the Flex project will not shrink and the Flex project will overflow the Flex container. If you do not explicitly set Flex-shrink, flex projects will be allocated equally to the flex container and the Flex project will be narrowed (the default flex-shrink value for flex projects is 1). If you explicitly set flex-shrink to a different value that is not zero, The Flex project will allocate Flex container space according to different shrink factors, and the Flex project will also narrow

Specifically, we can draw a flow chart of this aspect:

The flex – basis calculation

The flex-basis calculation is a little more complicated than flex-grow and Flex-shrink because it relates to the flex project’s Content, width, min-width, and max-width. The relationship here refers to the weight relationship between them. Simply put, when these properties are present together in a Flex project, who ultimately determines the width of the Flex project.

In a Flexbox layout, you can use flex-basis to instantiate the Flex project size, that is, to initialize the Flex project size before any Allocation of Flex container space (free or insufficient) occurs.

In fact, there is an implicit formula for setting the Flex project size in the Flexbox layout module:

Content ➜ width ➜ flex-basis

Simply put, if the Flex project does not explicitly specify a value for Flex-basis, then Flex-basis falls back to the width (or inline-size) property; If the value of the width (or inline-size) property is not explicitly specified, flex-basis falls back to calculating the width based on the Flex project content. However, determining the Flex project size is also influenced by flex-grow and Flex-shrink, as well as the size of the Flex container. Furthermore, the final Flex project size is limited by the min-width, max-width(or min-inline-size, max-inline-size) properties. You have to pay attention to that.

Here’s an example:

<div class="flex__container">
    <div class="flex__item"></div>
    <div class="flex__item"></div>
    <div class="flex__item"></div>
    <div class="flex__item"></div>
</div>



.flex__container {
    width: 600px;
    display: flex;

    border: 1px dashed #f36;
    align-items: stretch;
}
Copy the code

Flex projects do not explicitly set any properties related to size, using content to stretch the Flex project.

<div class="flex__container"> <div class="flex__item">Lorem ipsum dolor sit amet</div> <div class="flex__item">Lorem ipsum dolor sit amet consectetur adipisicing elit</div> <div class="flex__item">Fugiat dolor nihil saepe. Nobis nihil minus similique hic quas mollitia.</div> <div class="flex__item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias consequuntur sequi suscipit iure fuga ea! </div> </div>Copy the code

In this example, the Flex project is not explicitly set to the Flex-basis property. In this case, the flex-basis property takes the default value auto:

Explicitly set width to the Flex project.

:root { 
  --width: 120px; 
} 

.flex__item { 
  width: var(--width); 
}
Copy the code

At this point, all Flex projects are of the same width:

The browser calculates the Flex-basis value as auto, but explicitly sets width to 120px. The final width property determines the size of the Flex project.

The Flex project is explicitly set to a Flex-basis value, i.e. the Flex project has both width and flex-basis values.

:root {
    --width: 120px;
    --flexBasis: 150px;
}

.flex__container {
    width: 800px;
}

.flex__item {
    width: var(--width);
    flex-basis: var(--flexBasis);
}
Copy the code

Although both width and flex-basis are explicitly set in the Flex project, the final Flex project size takes the flex-basis value:

Influencing the Flex project size in the Flexbox layout module should be determined by its implicit formula (content ➜ width ➜ flex-basis). If you want to explicitly size your Flex project, it is best to use flex-basis rather than width (or inline-size).

And finally, don’t forget:

Using flex-basis is limited by min-width and max-width (or min-inline-size or max-inline-size in the logical property).

In CSS, if the width, min-width, and max-width attributes are present at the same time, the weight calculation follows the following rules:

  • If the width of an element is greater than that of max-width, then the width of the element is equal to that of max-width.

  • If the element’s width is less than min-width, the element’s width is equal to min-width.

  • If min-width is greater than max-width, min-width has a higher priority than max-width (min-width wins).

If width, flex-basis, and min-width appear in a Flex project at the same time, the calculation process is as follows:

  • According to the rule: content ➜ width ➜ flex-basis, determine the value shipped for the Flex project, i.e. flex-basis will be applied to the Flex project (Flex-basis wins out)

  • If the width of a Flex project is less than min-width, then the width of the Flex project is equal to min-width. If the min-width of the Flex project is less than min-width, then the min-width of the Flex project is equal to min-width.

In this way, if flex-basis is less than min-width, the width of the Flex project will be min-width, i.e. min-width overwrites flex-basis (min-width wins out).

If width, flex-basis, and max-width appear in the Flex project at the same time, the specific calculation process is as follows:

  • According to the rule: content ➜ width ➜ flex-basis, determine the value shipped for the Flex project, i.e. flex-basis will be applied to the Flex project (Flex-basis wins out)

  • If the width of the Flex project is greater than that of the max-width project, then the width of the Flex project is equal to that of the max-width project.

In this way, if flex-basis is greater than max-width, the flex project width will be max-width, i.e. max-width overrides flex-basis (max-width wins out).

If the Flex project contains width, flex-basis, min-width, and max-width at the same time, a new rule is added to the above rule:

  • If min-width is greater than max-width, min-width has a higher priority than max-width (min-width prevails).

So for Flex projects:

  • Flex-basis is greater than max-width, the width of the Flex project is equal to max-width, i.e. max-width will override flex-basis (max-width wins out).

  • If flex-basis is less than min-width, the flex project’s width will be min-width, i.e. min-width overtakes Flex-basis (min-width wins out).

Since min-width is greater than max-width, we can compare flex-basis with min-width, that is, flex-basis will take min-width. If min-width is less than max-width, it will still be max-width. If flex-basis is greater than max-width, it will be max-width.

If you understand, you can use simpler rules to determine the size for your Flex project.

First, use the content ➜ width ➜ flex-basis to determine which to use for your Flex project. If the Flex project explicitly sets the Flex-basis property, content and width are ignored. And min-width is used to set the lower limit for Flex projects; Max-width is used to set the upper limit of the Flex project.

Use a simple flow chart to describe:

Note that Flex-shrink and flex-grow on Flex projects also affect Flex project size!

Margin on Flex projects

In Flex projects, explicitly setting margin to auto allows you to flexibly control the location of a single Flex project in the Flex container:

For example, using margin-left: auto is useful for an effect like this:

Case finishing

Padding and automatic width issues

For this case, a better solution does not explicitly set any of the padding and margin properties for the inner elements. A human implementation might look like this:

<span class="divider">< span class="divider">< span class="divider">< span class="divider"> 1000</span> </div> .flex__container { display: inline-flex; min-width: 200px; height: 60px; border: 1px solid rgba(255, 0, 54, 1); Background-color: rgba(255, 0, 54, 0.1); border-radius: 4px; color: #ff0036; font-size: 24px; font-weight: 400; } .flex__container > span { display: inline-flex; justify-content: center; align-items: center; } .divider { border-right: 1px dashed currentColor; } .coupon { min-width: 50px; } .price { flex: 1; min-width: 0; padding: 0 10px; }Copy the code

  • Set the Flex container to inline-flex and give it a min-width (by default the same as the Sketch) and a height

  • (2) Set a fixed width on the element. (3) Set a fixed width on the element. (4) Set a fixed width on the element

  • (3) A border of about 1px. Use either border or width

  • ④ The right “price” is the next non-determinable factor, in the Flex project, you can explicitly set Flex: 1, let this part occupy the rest of the Flex container space

  • ⑤ To make the “price” more scalable, when the Flex container has no space left, the number will be close to the main end and dividing line of the Flex container. To make it more visually friendly, set a padding-left and padding-right in the “price” container

summary

This note covers most of the Flexbox specification as well as some critical points, and there are a few more things to do with laying out your UI using Flexbox than just the basics and details mentioned in the article. Such as positioning in Flex container, hierarchy calculation, etc., Flex container and Flex project encounter overflow, and rolling calculation in Flex container, etc. These are strongly indicative of the scene, and the processing of the boundary is too complex. In our ordinary use of Flexbox rarely even rarely encountered. Therefore, it is not listed in the article.

If you’re using Flexbox, and especially if you’re using IMGCook to auto-restore your UI and it doesn’t work the way you expect, or it doesn’t make sense, feel free to communicate.