Flex align-items: center; 狀況下, swiper控件寬度爲0問題

微信小程序自帶了一個container:

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

設置了控件豎向顯示,並居中顯示, 此時其內部的swiper控件默認width變成了0, <text> 有內容(有固定寬度)的<view> 不存在問題

如今對前端還停留在學習階段, 猜想設置了align-items: center; 後可能影響swiper默認寬度的測量, 後面知道了再補充

 

 解決方案

1.去掉align-items: center;  

2.顯示設置swiper控件寬度