Flex layout browser compatibility solution

preface

The Flex layout is very common in front end development. Although it has been many years since its inception, there are many people who have a superficial understanding of the Flex layout, such as using Flex: 1 or Flex: Auto and so on, causing some style problems or browser compatibility problems, immediately cannot be dealt with.

Therefore, I have compiled an article from two aspects of basic flex layout knowledge and browser compatibility, combined with my personal work experience, hoping to be helpful to you. If there is anything wrong, please kindly advise me!

The article is roughly divided into two parts, the first piece is the basic knowledge of Flex, including layout features, attributes, etc., relatively theoretical. The second part is a summary of the browser compatibility problems of Flex, as well as suggestions on how to use Flex. This is derived from the actual problems encountered in personal work scenarios. After trying to solve the summary, it is a bit practical application.

For those of you who are familiar with flex layout but have browser compatibility issues, you can jump right to the second piece.

Flex layout – One-dimensional layout

Flexbox is a one-dimensional layout, because a flexbox can only handle the layout of elements on one dimension at a time, one row or one column

Flex layout – Container properties

The same

• For the child elements inside the container, there is no difference

flex-direction

Start line & end line

The relationship between property values and axis, start and end lines

Assuming that row is the benchmark, the line bit changes for the other attributes are as follows:

• Row-reverse: spindle & cross axis unchanged; Start line & end line changed
  • The starting line and ending line of the spindle are exchanged; The starting line and ending line of the intersecting axis remain unchanged
• Column: spindle and cross axis swap; Start line & end line changed
  • The starting terminating line of the principal axis is interchanged with the starting terminating line of the intersecting axis
• Column-reverse: the main axis and cross axis are reversed; Start line & end line changed
  • The starting terminating line of the principal axis is interchanged with the starting terminating line of the intersecting axis
  • The starting line and ending line of the crossing axis are interchanged; The starting line and ending line of the spindle remain unchanged

Aligns the child elements on the main axis

• The initial value isflex-start, the child elements are arranged from the starting line of the container.
• flex-endElements are arranged from the container terminator line
• center, centered, with each element close to each other
• space-between, fill the container, and the elements are equally spaced
• space-around, fill the container, and the left and right sides of each element are equal

Aligns the child elements on the cross axis

• The initial value isstretch
  • [Fixed] The container height is not defined. The container will be stretched to the height of the highest element.
  • Defines the container height to which elements are stretched (contracted).
• flex-startAlign with the starting line of the container
• flex-endAlign the container’s stop line
• center, center aligned

Aligns the child elements on the cross axis, but on multiple lines

• The default value isstretchThe remaining space is bisected by all rows to enlarge their cross axis size
• flex-start, all rows are arranged from the starting line of the container
• flex-end, all lines are arranged from the container terminating line
• center, all the rows are in the middle of the container, in a compact arrangement
• space-between, all rows fill the container and are equally spaced
• space-around, all rows fill the container, and the space above and below each row is equal

Line feed way

• The default is NowRap, with no line breaks
• Wrap, and line breaks
• Wrap-reverse, a line feed is arranged in reverse

Child element default style

• Flex-direction: row, where the elements are arranged in a single line starting at the beginning of the main axis
• Flex: 0 1 auto, elements do not stretch in the main axis but shrink with available space
• Flex-wrap: nowrap, if there are too many elements out of the container, they overflow without line wrapping
• If some elements are taller than others, the element is stretched along the cross axis to fill its size

The initial (base) size of the element

• The default value isauto
  • Element sets the width,flex-basisIs the set width
  • Element has no width set,flex-basisIs the size of the element content
• flex-basisAttributes take precedence overwidthProperties;
• Set to 0, the size of the child element is not considered in the space allocation calculation

The expansion of the element along the main axis takes up the space available on the main axis

• Space is allocated proportionally (default is 0), expansion value isflex-basisThe benchmark is multipliedflex-growExpansion of the scale
  • If you set the same value, the available space is equally divided
  • Set different values to divide the available space proportionally

The following figure shows differentflex-basisIn the case of,flex-growScenario where both sets to 1:

The shrinkage of an element along the principal axis takes effect only if the sum of the child elements exceeds the principal axis

• Allocate space proportionally (default is 1), shrink value isflex-basisThe benchmark is multipliedflex-shrinkShrinkage ratio
• As the box gets smaller and smaller, the smaller child elements end up withmin-contentThe following space will always be removed from the large child element
  • The so-calledmin-content, the width of the smallest non-breakable element inside the current container
    • Below largeSizeContentWithoutWrap is continuous not to line breaks, so cannot be compressed space
    • Middle-size-content-width-split-code can be broken with dashes, so newlines can be used to compress space
    • Content-content-content-content has been broken to an unbreakable line width, so no line breaks can be continued to compress space

The following figure shows differentflex-basisIn the case of,flex-shrinkScenario where both sets to 1:

Order of items

• The smaller the value is, the more advanced it is. The default value is 0

Allow individual items to have different alignments than other items

• coveringalign-itemsProperty, the default value isauto
• Represents inheriting from the parent elementalign-itemsattribute
  • Equals if there is no parent elementstretch

flex: initial

Equivalent to Flex: 0 1 Auto

flex: auto

Equivalent to Flex: 1 1 Auto

flex: none

Equivalent to Flex: 0 0 auto

flex: 1

Equivalent to Flex: 1 1 0

Flex: Auto vs. Flex: 1

flex: 1 1 0

• The available space is allocated evenly based on the 0 width of each element
• The elements are of equal width

Browser Compatibility Overview

• Red indicates that the Flex specification is not supported
• In yellow, only the old version 09 Flex specification is supported (display: box;).
• Green is full support for the new version 12 flex specification (display: flex;)

Solutions that support a few older browsers

• Work with the Flex layout that supports both version 09 and 12

.container {
	display: box; 
	display: flex; 
}
Copy the code

Compatibility issues with Chrome 49

The parent elementflex: 1The child elementsheight: 100%Cannot fill the parent element because there is too little content

why

The parent element does not set height, so the child element does not get the height of the parent element

Solution 1

Absolute, relative, the height of the element is calculated according to the height of the parent element

explain

As mentioned in the specification, if the height of the containing block is not explicitly specified (the height is determined by the content), and the element is not absolutely positioned, then the computed value is auto, and the height and percentage values cannot be computed! auto * 100/100 = NaN

defects

Effects of absolute, such as setting width to 100%

Solution 2

Instead of using height: 100%, the child element uses flex-grow to fill up the space

Solution 3

Instead of using flex: 1, the parent element uses display: flex; + height: 100%;

explain

Applied to thedisplay: flexTo make it a Flex container.

This will automatically setalign-items: stretch, tells child (.item) the full height of the extension parent.

Problem description

When the parent element is setflex: 1Fill container, child element setheight: 100%After that, the child element has more content than the parent element

Parent element Settingsmin-height: 0This is equivalent to telling the child the parentheight > 0The child element can then indirectly get the height of the parent element and set itheight: 100%Keep the parent element at the same height to avoid overflows

Pay attention to

To be compatible with Chrome49, use display: flex; + height: 100%; Replace the flex: 1

conclusion

Height: 100% for the child element in Chrome79 or above, it is recommended that the parent element use min-height: 0. (Chrome 79) + display: flex; + height: 100%; (49) Chrome

Chrome 49 differs from Chrome 79 and above in another way

chrome 49



Chrome above 79

The solution

To maintain the complete display of flex child elements, it is best to set Flex-shrink: 0 when you set flex;

QQ browser 10 under Flex: auto does not take effect compatibility issues

QQ Browserchromium70, parent element flex: auto, child element height: 100%, cannot expand or shrink child element

The solution

Change flex: auto to flex: 1 with min-height: 0

Flex layout usage recommendations

.container {
	display: flex;
	flex-direction: row;
}
Copy the code

For vertical layout

Need to add compatible chrome49 and chrome79 styles

.container {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
}
Copy the code