flex怎么让其中一个满行?

Question

四个子元素
让第一个满行类似block
剩下三个挤一行

Answer 1

css样式:

*{

        margin: 0;
        padding: 0; 
    }
    .wrap{
        display: flex;
        flex-wrap: wrap;
        background-color: red;
    }
    .inner{
        width: 100px;
        height: 100px;
        margin: 15px 10px;
        order: -10;
        flex-grow: 1;
        background-color: green;
    }
    div.inner:first-child{
        width: 100%;
        flex-grow: 4;
    }

html布局:

<div class="wrap">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
<div class="inner">4</div>
</div>

页面效果:

不知道是不是你想要的效果，如果是望采纳。