如何在第一行放置圖標和在第二行放置文字？

Question

標題幾乎可以解釋自己。我有flex容器，在內部，我有兩列div內的列應該是在不同的行，但我不能讓他們這樣工作。

標籤像br，p不會因爲某些原因工作。

JSFiddle

HTML

<ion-content has-header="false"> 
    <div class="row no-padding"> 
    <div class="col dashboard-top-item center"> 
     <div class="ion-ionic"></div> 
     <div>Second line</div> 
    </div> 
    </div> 
</ion-content> 

CSS

.dashboard-top-item { 
    border-width: 0px 2px 0px 2px; 
    border-style: solid; 
    border-color: #444444; 
    background-color: #595858; 
    color: #D0D0D0; 
    height: 21vh; 
    font-size: medium; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    } 

我怎麼能這樣做這個？先謝謝你！

Answer 1

使用flex-flow：

只是價值加入到你的.dashboard-top-item此CSS屬性：

flex-flow: column; 

結果：JSFiddle。

使用flex-wrap和min-width：

這一個比較複雜一點。

.dashboard-top-item { 
    border-width: 0px 2px 0px 2px; 
    border-style: solid; 
    border-color: #444444; 
    background-color: #595858; 
    color: #D0D0D0; 
    font-size: medium; 
    padding: 4vh; /* not fixed height */ 
    display: flex; 
    flex-wrap: wrap; /* allow flex to wrap */ 
} 
/* in addition: */ 
.dashboard-top-item > div { 
    flex: 1; 
    box-sizing: border-box; 
    text-align: center; 
} 
.ion-ionic { 
    min-width: 100%; 
} 

結果：JSFiddle。