フレックスボックスで最後のアイテムではなく、奇数個のアイテムの最初のアイテムを拡大することはできますか？

Question

奇数個のアイテムがある場合、最後のアイテムが増えてスペースがいっぱいになります。

最後のアイテムではなく、最初のアイテムを増やすことができますか？

例：以下codepen

コード：

.flex-container { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    -webkit-flex-flow: row wrap; 
 
    align-content: stretch; 
 
} 
 
.flex-item { 
 
    background: tomato; 
 
    padding: 5px; 
 
    width: 200px; 
 
    height: 150px; 
 
    margin-top: 10px; 
 
    flex: 1 0 200px; 
 
    line-height: 150px; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 3em; 
 
    text-align: center; 
 
}

<ul class="flex-container"> 
 
    <li class="flex-item">1</li> 
 
    <li class="flex-item">2</li> 
 
    <li class="flex-item">3</li> 
 
    <li class="flex-item">4</li> 
 
    <li class="flex-item">5</li> 
 
    <li class="flex-item">6</li> 
 
    <li class="flex-item">7</li> 
 
</ul>

Answer 1

私はあなたがflexboxアイテムをラッピングしているとき、それが可能だとは思いません。

.flex-container { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-flow: row wrap-reverse; 
 
    -webkit-flex-flow: row wrap-reverse; 
 
    align-content: stretch; 
 
} 
 

 
.flex-item { 
 
    background: tomato; 
 
    padding: 5px; 
 
    width: 200px; 
 
    height: 150px; 
 
    margin-top: 10px; 
 
    flex: 1 0 200px; 
 
    line-height: 150px; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 3em; 
 
    text-align: center; 
 
}

<ul class="flex-container"> 
 
    <li class="flex-item">1</li> 
 
    <li class="flex-item">2</li> 
 
    <li class="flex-item">3</li> 
 
    <li class="flex-item">4</li> 
 
    <li class="flex-item">5</li> 
 
    <li class="flex-item">6</li> 
 
    <li class="flex-item">7</li> 
 
</ul>

Answer 2

をこれは何が必要ありません：それは代わりに使用wrap-reverseをDO-する場合はしかし、ここでのソートの回避策です

.flex-container { 
    flex-wrap: wrap-reverse; 
    flex-direction: row-reverse; 
} 

これは置くflex-wrap方向を反転させます最初に伸ばしたアイテム。次にflex-directionは、元の順序になるようにアイテムを並べ替えます。

Answer 3

ul.flex-コンテナ、この使用して、子CSSセレクタに のスタイルを

@media screen and(max-width: 800px){ 
    .flex-container .flex-item:first-child { 
    min-width: 100%; 
    } 
}