1. Compatibility

flex layout can be used on pc, mobile, applet, etc., but there are compatibility problems for various browsers, mainly compatibility problems of IE browser, IE browser version requires IE9 or above to use flex layout

2. The vertical layout attribute is invalid

When the height of the box is indeterminate (when the box is squeezed apart by the height of the content), When the height of the box is not set, at this time not suitable to use flex layout

Application scenarios:

As shown above:

When our list items are unsure how many, we can'tSet the height to the parent box, because the flex layout will fail (no effect) in the vertical direction when the parent box does not have a certain height,

For example, setting the following properties to the parent box of the list will not work:

 flex-direction: column;justify-content: space-between;

At this time, we need to use magic and padding to achieve the above effect

3. Cases

In the browser

You can see that the justify-content: space-between of the ul tag does not take effect

4. Summary

Flex layout has many advantages. Using flex layout and positioning can quickly complete the layout effect. It is also the most commonly used technology when we develop pages, but felxThe layout has compatibility issues for IE version 9 and below and when the parent box does not have a height setWhen in vertical orientation cannot use flex layout