Flex layout is really fragrant, elastic box

I thought I could write the front-end at my fingertips. It wasn't until I saw the mobile h5 code I wrote a long time ago today that I realized why I wrote such stupid code before. (=ﾟДﾟ=)

Up to here, everything is still good,
insert image description here
and then it crashes when it is adapted to other models.

Now I am a little more mature (hahahaha, just kidding)
so I changed the style here again
and I found out where the problem is. , I wrote the style before using the percentage, and the width of the different models is different, so it can’t adapt to most models, and it is easy to collapse.
insert image description here At this time, I had an idea in my head. I feel that the most suitable way to write these is the elastic box. Please take a look at the
code after I changed the flex layout YYDS below~ I feel that the previous style is too ugly. I By the way, I changed the style.

The following is the effect after changing the Flex layout.
insert image description here
The following is the code

.eva_top_left{
    
    
    flex: 4;
    text-align: center;
    padding-top: 2.3rem;
}
.eva_item1{
    
    
    font-weight: bold;
}
.eva_top_right{
    
    
    flex: 8;
    font-size: 0.6rem;
    margin-top: 1.5rem;
    margin-right: 0.3rem;
}
.eva_top_right > div {
    
    
     display: flex;
     justify-content: space-around;
     height: 1.5rem;
}
.eva_top_right .textsty{
    
    
    color: #23B177;
}
.eva_con{
    
    
    margin-top: 0.6rem;
}
.eva_con > div {
    
    
    font-size: 0.7rem;
    margin: 0.4rem;
    margin-top: 0.6rem;
}

Let’s take a look at the model adaptation of iphone 12/13 mini, iphone 6/7/8 plus, and iphone 5.
insert image description here
Of course, no matter what the situation is on the simulator, you have to see the effect on the real machine, right?
This is mine. The display on iqoo neo 5

is really good~ hee hee

Flex layout is really fragrant, elastic box

Supongo que te gusta