如何使用 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 的默认值是stretch。