CSS Flexbox:增长第一个flex项，而不是最后一个

Question

我有一个flex boxes布局，它在最后的"行"；，像这里：

屏幕截图

CSS：

.container {
display: flex;
flex-flow: row wrap;
align-items: stretch;
}
.item {
flex-grow: 1;
flex-shrink: 0;
display: inline-block;
position: relative; width: 14em; height: 14em; min-width: 14em;
}

问题：在这样的CCD_ 1流中；第一个"；弹性项而不是"弹性项"；最后一个"；一个(通过CSS而不是JS(？

Answer 1

您可以添加flex wrap：wrap reverse；在容器类中，并在html中以相反的顺序添加元素

.container {
display: flex;
flex-flow: row wrap;
align-items: stretch;
flex-wrap: wrap-reverse;
}

<div class="container">
<div class="item">5</div>
<div class="item">4</div>
<div class="item">3</div>
<div class="item">2</div>
<div class="item">1</div>
</div>