Why do I need to understand FlexBox’s layout algorithm

If you read a few introductory Flex articles, you’ll notice that Flex’s Container and Item properties add up to about a dozen, which is a lot to learn, but it’s easy and fun to learn with a little time. But when you’re happy to use Flex for complex and varied layouts, you may run into boundary issues like Max/min size limits. This is not described in much detail in most Flex documentation. Let’s look at an example.

Imperfect Grid System

For those of you who have used component libraries such as Bootstrap or ANTD, there is a layout tool called raster. The purpose of the grid system is to make the design follow certain rules, so that the design can achieve full industrialization (efficiency), but also a greater degree of design quality. The Grid implementation of Flex is much simpler than the float implementation!

One of the most important features of raster layouts is the equal-width layout. This online example is very easy to implement with Flex. This example will result in a perfect uniform width layout, which is very happy 😄.

But the hand a shake, broke 😭.

Why is that? How to solve it?

First give the solution:

  1. overflow-x: hidden | scroll | auto;
  2. min-width: 0px; Smaller values are fine.
  3. width: 0px; Smaller values are fine.

< span style = “max-width: 100%; clear: both; min-width: 0; What other solution is left that allows width and min-width to be 0? With this question in mind, let’s look at some of the concepts associated with FlexBox algorithms.

Concepts related to flexible layouts

Main size and cross size

Main size can be interpreted as the size on the main axis. Depending on the flex-direction Settings, it can be width and height. The corresponding min/ Max main size corresponds to min/ Max width and min/ Max height, respectively. Cross size is exactly perpendicular to main size, depending on the flex-direction setting, can also be set to width or height.

automatic minimum size of flex items

The default value for min-width is 0 in CSS2 standard layout types (block/inline, etc.). However, in flex layouts, the default value for min-content width is min-content size. It is this definition that causes the Grid System above to be stretched by content overflow. When width or min-width is not explicitly set, the flex-basis setting does not work, and the element size is ultimately limited by the min-width value.

The flex – the basis properties

the initial main size of the flex item, before free space is distributed according to the flex factors.

Flex-basis defines the base value for scaling flex items. The following is the definition of Flex-basis.

  • Name: flex-basis
  • Value: the content | < > ‘width’
  • Initial: auto
  • Applies to: flex items
  • Inherited: no
  • Percentages: relative to the flex container’s inner main size
  • Computed value: specified keyword or a computed value
  • Canonical order: per grammar
  • Animation type: by computed value type

In addition to auto | content | < > ‘width’, can also accept some value of the public.

/* Specify <'width'> */
flex-basis: 10em;
flex-basis: 3px;
flex-basis: auto;

/* Intrinsic sizing keywords */
/* CSS3 Sizing is a common attribute defined by the Sizing specification. */ is not recommended
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;

/* Automatically size based on the flex item’s content */
flex-basis: content;

/* Global values */
flex-basis: inherit;
flex-basis: initial;
flex-basis: unset;
Copy the code

You need to understand the values of auto and content. When auto is set, the value of width or height is used, and if the value of width or height is auto, it is treated as the value of content. When content is set, the content width or height of the item is normally rendered.

flex base size

Flex base size is calculated from the flex-basis property value and is directly used to calculate compression and stretching results.

  1. If the flex-basis attribute is set to an explicit value (e.g., flex-basis: auto < width/height >, flex-basis: 10px), the flex base size is equal to the flex-basis value.
  2. If there is no explicit value, the calculation rules will be slightly more complex, and can be simply interpreted as depending on the width/height of the normal rendering of the item. For details, read the standard documentation.

hypothetical main size

The main size of the assumed item before scaling. This value is equal to the flex base size limited by min/ Max main size and is used to calculate the remaining space. Here is the pseudocode.

hypothetical_main_size:
if flex_base_size > max_main_size:
    return max_main_size
if flex_base_size < min_main_size:
    return min_main_size
return flex_base_size
Copy the code

Understanding scaling algorithms

The first step is to determine the item that does not scale

When calculating free space, first determine the unscalable item (frozen item) and calculate the space occupied by elements. The rules are as follows:

if flex_shrink == 0 and flex_grow == 0:
    return min_main_size
if flex_grow > 0 and flex_base_size > max_main_size:
    return max_main_size
if flex_shrink > 0 and flex_grow == 0 and flex_base_size < min_main_size:
    return min_main_size
Copy the code

Step 2: Calculate free space

The Flex Container first removes the size of frozen items and then removes the Flex base size of scalable items. I get my initial free space

The third step is to calculate the stretching cycle

main_size = flex_base_size + flex_grow_factor * free_space / SUM(flex_grow_factor of items)
Copy the code

The fourth step is to calculate the compression cycle

scaled_flex_shrink_factor = flex_base_size * flex_shrink_factor main_size = flex_base_size - scaled_flex_shrink_factor *  free_space / SUM(scaled_flex_shrink_factor of items)Copy the code

Larger flex_base_size compresses more, or shrinks faster

Step 5: Check whether the min/ Max main size is exceeded

If the value exceeds min/ Max main size, the value of min/ Max main size is required.

Flex layout Examples

Sandwich layout

The layout is like a sandwich with non-scalable content width on both sides and adaptive scaling in the middle. It has many application scenarios, such as Modal, Title, Page Frame, Select Option. In the non-Flex era, inline-block, float and other techniques were used to implement it, which was complicated and difficult to perfect. Especially in the vertical direction of the layout, it does not automatically split the middle height. Implementing everything in Flex is much easier. Online example

Derivative of the sandwich layout

In addition to the three columns, there are many 2-column layouts that can also be implemented indirectly through sandwich layouts.

Reference

  • www.w3.org/TR/css-flex…
  • Developer.mozilla.org/en-US/docs/…
  • Caniuse.com/#search=min…
  • Css-tricks.com/snippets/cs…

Article author: Yan Wenxu (EE People Team)

Invite great people to do something challenging with you! Bytedance Efficiency Engineering team r&d position wanted to be a partner of technology giants come and see! Job description