如何使用flexbox自动增长儿童？

Question

我有：

    <style>
        .parent{
            display: flex;
            flex-flow: row wrap;
        }
        .c1{
            flex: 1 100%;
            background: green;
        }
        .c2{
            flex: 1;
            background: red;
        }
        .c3{
            flex: 4;
            background: cyan;
        }
    </style>

<div class="parent">
    <div class="c1">100% width</div>
    <div class="c2">This text is big and long, and pushes the other div towards the bottom of the page and blabla.</div>
    <div class="c3">This should not grow.</div>
</div>

我想知道青色div是否有100％可行。固定大小看起来并不正确，因为我希望它随着不同窗口大小的文本流而增长。

Answer 1

只需添加：

align-items: flex-start;

到父div。这使得孩子们对齐并且具有不同的尺寸。奇怪的是，align-items的默认值是拉伸。