What should I do if the Flex layout gap attribute in uni-app applet fails?

Solution to the failure of the Flex layout gap attribute of uni-app applet

When using display: flex layout, gap attribute is used to conveniently set element spacing, but it has problems with compatibility on the uni-app applet, which may cause failure. This article provides an elegant solution to enable cross-platform compatibility using the @supports feature of CSS.

Problem: On the web and app side, gap attribute works normally, but fails after compilation on the mini program side. Although directly using the margin attribute of child elements can solve the problem, the code maintenance cost is high when the number of elements changes.

Solution: Use @supports condition to determine, and apply different styles based on whether the browser supports the gap attribute. If the browser does not support gap , use the parent element negative margin and child element margin to simulate the gap effect.

Code example:

 @supports not(gap:10px) {
    #test { /* flex container*/
        margin-right: -10px;
        margin-bottom: -10px;
    }
    #test > div { /* child element*/
        margin-right: 10px;
        margin-bottom: 10px;
    }
}

In this code, #test is the ID of the flex container. When the browser does not support gap , the parent element sets a negative margin to offset the margin of the child element, simulates the gap effect. 10px needs to be adjusted according to the actual gap value.

This approach ensures that element spacing is displayed correctly on all platforms, improving code maintainability and simplicity. There is no need to write different code for different platforms, which effectively solves the problem of invalid gap attributes on the uni-app mini-program.

The above is the detailed content of What should I do if the Flex layout gap attribute in uni-app applet fails?. For more information, please follow other related articles on the PHP Chinese website!