如何使用 flexbox 自动增长 children？

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%。固定尺寸看起来不合适，因为我希望它随着不同 window 尺寸的文本流动而增长。

Answer 1

只需添加：

align-items: flex-start;

到parentdiv。这使得 children 对齐顶部并具有不同的大小。奇怪的是，align-items 的默认值是 stretch.

如何使用 flexbox 自动增长 children？

How to have autogrow children with flexbox?

height

flexbox