css3 - Why is the flex property in css flex box set like this in this example?
迷茫
迷茫 2017-06-12 09:24:28
0
1
952

I can’t understand the following settings for item1 and item2 in the css code. I know that flex:1 2 200px;these three values ​​correspond to flex-grow,## respectively. #flex-shrink,flex-basis, but I don’t know the intention of writing this

.item1{
    flex:1 2 200px;
    background:#c00;
}
.item2{
    flex:2 1 100px;
    background:#069;
}

The complete code is as follows

html:

<p class="flex flex-300">
        <p class="item item1">1</p>
        <p class="item item2">2</p>
</p>
<p class="flex flex-150">
        <p class="item item1">1</p>
        <p class="item item2">2</p>
</p>

css:

.flex{
        display:inline-flex;
        height:60px;
        margin:5px 5px 40px;
        border:1px solid #000;
        vertical-align: top;
    }
    .flex-300{
        width:300px;
    }
    .flex-150{
        width:80px;
    }
    .item{
        height:60px;
        text-align: center;
        line-height: 50px;
    }
    .item1{
        flex:1 2 200px;
        background:#c00;
    }
    .item2{
        flex:2 1 100px;
        background:#069;
    }

The final rendering effect is:


迷茫
迷茫

业精于勤,荒于嬉;行成于思,毁于随。

reply all(1)
世界只因有你

As an analogy, for example, in a browser environment, when the browser is reduced, item1 and item2 will sink, and then the three p boxes will not be arranged side by side, but will be arranged vertically. When the browser interface becomes larger , they will float up and become arranged side by side.

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!