css - Flexbox 布局未按预期工作

Question

我有这个 HTML

<div class="flex-container">
    <div class="flex-full">1</div>
</div>

<div class="flex-container">
    <div class="flex">2</div>
    <div class="flex">3</div>
    <div class="flex">4</div>
</div>

以此 CSS 样式化

    *{
    margin:0;
    padding:0;
}
    .flex-container{
        width: 90%;
        max-width: 960px;
        display: flex;
        background-color: lightgray;
        margin-left: auto;
        margin-right: auto;
        flex-wrap: wrap;
    }
    .flex-full{
        background-color: red;
        flex: 1 0 100%;
    }
    .flex{
        background-color: blue;
        flex: 1 0 90px;
    }

    @media screen and (max-width: 480px) {
    .flex-container {
        background-color: lightgreen;
        width: 100%;
    }
}
    @media screen and (max-width: 480px) {
    .flex-container {
        background-color: lightgreen;
        width: 100%;
    }
}

但结果并不如意。我将尝试直观地展示问题(上传图片不起作用):

在屏幕宽度为 320px 及以下时，我得到以下结果

    111111111111111
    222222233333333
    444444444444444

我期望的是:

    phone screen          bigger screen
    111111111111111       111111111111111111
    222222222222222       222222333333444444
    333333333333333
    444444444444444

我希望它有意义，请帮助我:)

JSFiddle

Answer 1

您是否正在寻找 flex-direction: column;？

在 .flex-container 上。