On the compatibility of flex layout and box layout of Huawei meta8 mobile phone's own browser

Today's mobile phones have a lot of needs to be vertically centered and horizontally centered, and also to be able to perfectly match the needs of the screen. The perfect box model box-flex and flex elastic layout appeared in CSS3. You can find all kinds of information about these two on the Internet. It is not difficult to use the information of various layouts;

flex layout: display: flex

parent node:

.box {
  display: flex;
  justify-content: center;  
  align-items: center; // 垂直居中
}

child node

.item{
    flex 1
}

Materials for usage links: flex layout dice layout  ;  Flex layout tutorial: grammar

box layout: display: box

parent node:

.box{
    display: box;
    box-align: center; //Specify how to align the child elements of the box
    box-pack: center; // Specify the horizontal position in the horizontal box or the vertical position in the vertical box
}

child node:

.item{
    box-flex:1;
}

Usage Linked Materials: Introduction to the Flexbox Model

Compatibility problems

Now most mobile phones are compatible with flex layout, and we mainly use more flex, so there is not much use and research on box layout, but recently when using flex layout, we found that Huawei meta8 self-contained The browser (with a relatively low version) does not support this flex layout, but it supports the following property, so it can be used again. . . . .

.box{
    display: -webkit-box;
}

Haha, what is even more shocking is that when it is compatible with Huawei meta8's own browser, because the stylus preprocessor is used in the project, it cannot be compiled when compiling

.item{
    -webkit-box-flex:1;
}

Finally, a padding attribute is added to compile. Although I don't know why, the compilation is successful, and it is worth noting that this padding attribute must be placed next to each other before compiling, although it feels a bit incredible. . . . .

.item{
    -webkit-box-flex:1;
    padding 0
}