flex with bootstrap - 調整大小時出現堆棧問題

Question

我使用 flex 如下，對 flex 世界有點新，

.couple-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

和HTML其他大小，我使用bootstrap grid system ，如下所示，

  <div class="col-xs-12 couple-container">
    <div class="col-sm-3 couple nikhilpic">
          div1
    </div>
    <div class="col-sm-2 couple-info">
        div2
        </div>
       <div class="col-sm-1 heart">
        div3 
        </div>

    <div class="col-sm-2 couple-info">
        div4
        </div>
    <div class="col-sm-3 couple vidyapic">
           div5
    </div>
</div>

https://plnkr.co/edit/lGfsixyzoZnKX9qlY5VN?p=preview

上面的代碼給了我我想要的桌面視圖。 例如。 項目居中對齊，內容之間有空格。

問題：當我縮小尺寸（平板電腦或手機屏幕）時，我想使用 flex 來獲得堆棧視圖（一個在另一個之上），但不幸的是我沒有得到想要的輸出。

這就是我想通過刪除以下幾行來使用移動屏幕實現的目標，

https://plnkr.co/edit/bcEbslGtOrTRH6AyGYsb?p=preview

display: flex;
align-items: center;
justify-content: space-between; 

但看看桌面屏幕，一切都亂七八糟。

Answer 1

flex 容器的初始設置是flex-wrap: nowrap 。 這意味着 flex 項目被迫保持在一行中。 如果你想讓 flex 項目被包裹，你需要給容器flex-wrap: wrap 。

然而，當處理百分比長度時，一個 flex 項目可能只是收縮而不是包裹。 或者纏繞可能以不希望的方式發生。 在您的布局中似乎就是這種情況。

另一種選擇是將您的布局從桌面的行方向切換到移動/平板電腦的列方向。 像這樣的東西：

@media ( max-width: 800px ) {
  .couple-container { flex-direction: column; align-items: stretch; }
}

修訂版plunkr