フレックスボックスの子供をコンテナの底に押し込む方法は？

Question

私はFlexboxを使用してパネルにさまざまなコンテンツを表示しています。各パネルの下部にアイコンのリストがあります。

これは

* { 
 
    font-family: sans-serif; 
 
} 
 

 
.wrapper { 
 
    display: flex; 
 
    align-items: flex-start; 
 
    width: 500px; 
 
    background-color: #F9F9F9; 
 
    padding: 10px; 
 
    position: relative; 
 
} 
 

 
.image { 
 
    width: 150px; 
 
    margin-right: 1em; 
 
} 
 

 
.row { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex: 1 0 0; 
 
} 
 

 
.more { 
 
    font-weight: bold; 
 
    margin-top: 1em; 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    height: 4em; 
 
} 
 

 
.ideal { 
 
    position: absolute; 
 
    bottom: 20px; 
 
    right: -44px; 
 
} 
 

 
.ideal span { 
 
    color: green; 
 
font-weight: bold; 
 
    opacity: .2; 
 
    margin-right: 4em 
 
}

<div class="wrapper"> 
 
    <div class="image"> 
 
    <img src="http://placehold.it/150x68" alt="" /> 
 
    </div> 
 
    <div class="row"> 
 
    <span>Text content</span> 
 
    <span>Text content</span> 
 
    <span>Text content</span> 
 
    <div class="more"> 
 
     <span class="one">ICON1 
 
     </span> 
 
     <span class="two">ICON2</span> 
 
     <span class="three">ICON3</span> 
 
     <span class="four">ICON4</span> 
 
    </div> 
 
    </div> 
 
    <div class="ideal"><span>ICON4</span>&lt; ideal position</div> 
 
</div>

現在

、4つのラップの周りのアイコンと並んで、そのコンテナの先頭に行く。これCodepen Demo

し、断片に視覚化する方が簡単ですアイコン4を下に移動したいので、アイコン3（緑色の理想的な位置）に並んでいます

コードはデスクトップビューでうまく機能するので、HTML構造を変更するのではなく、メディアクエリを適用できるCSSスタイルが理想的です。

私はフレックスボックスに十分に新しく、アイコン4に適用できるルールはありますか？それはコンテナの底に押し込まれますか？

ご迷惑をおかけして申し訳ありません。

Answer 1

margin-top: auto~fourを追加し、more要素の場合はjustify-content: space-aroundを投げます。以下

参照のデモ：

* { 
 
    font-family: sans-serif; 
 
} 
 
.wrapper { 
 
    display: flex; 
 
    align-items: flex-start; 
 
    width: 500px; 
 
    background-color: #F9F9F9; 
 
    padding: 10px; 
 
    position: relative; 
 
} 
 
.image { 
 
    width: 150px; 
 
    margin-right: 1em; 
 
} 
 
.row { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex: 1 0 0; 
 
} 
 
.more { 
 
    font-weight: bold; 
 
    margin-top: 1em; 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    height: 4em; 
 
    justify-content: space-around; 
 
} 
 
.four { 
 
    margin-top: auto; 
 
}

<div class="wrapper"> 
 
    <div class="image"> 
 
    <img src="http://placehold.it/150x68" alt="" /> 
 
    </div> 
 
    <div class="row"> 
 
    <span>Text content</span> 
 
    <span>Text content</span> 
 
    <span>Text content</span> 
 
    <div class="more"> 
 
     <span class="one">ICON1 
 
     </span> 
 
     <span class="two">ICON2</span> 
 
     <span class="three">ICON3</span> 
 
     <span class="four">ICON4</span> 
 
    </div> 
 
    </div> 
 
</div>