因為最近再做小程序,需要用到flex布局,因為寫慣了web項目,初次學習確實感彈性布局的強大(關鍵是不用再管可惡的ie了)。
但是也遇到了align-items:center無法居中的問題,想了很久終於找到了解決辦法。
解決方法:
1.確定好自己的主軸方向是不是row,如果是column,那么恭喜你,align-items:center是不起效果的,這時候你可以試試justify-content:center,是不是居中了呢?(ps:這個問題我花了半天時間才弄明白,之前一直以為align-items只是控制上下居中的,沒有注意主軸的方向)
2.在帶有數字的view或者text標簽中不能上下居中,布局如下:
情況1:都是中文的情況下,給view加上align-items:center 其實是能居中的。
<view> <text> 內容一 </text> <text> 內容二 </text> <text> 內容三 </text> </view>
情況2: 只要帶有數字的情況下,view加上align-items:center部分手機上看着是不居中的(我的手機看着不是垂直居中的,別人的手機看着是垂直居中的,可能是我手機太差了,求老鐵支援支援,沒毛病!)
<view> <text> 內容22 </text> <text> 我是對不齊的 555 </text> <text> 內容三 </text> </view>
這時候可能顯示就不正常的,帶數字的可能會偏上一點,解決的辦法我找到了兩個:
1.,如果這個只是展示一部分信息,控制在一行之內顯示,那么可以給這個view設置高度行高,這樣他們就能垂直居中顯示了。
2. 如果需要顯示不止一行的話,那就只能把他們都放在同一個text或者view里面,這樣他們也能垂直居中顯示。這樣的缺點就是不好通過css控制每個內容之間的距離。結構如下:
<view> <text> 內容22 我是對不齊的 555 內容三 </text> </view>
(ps:應該還有很多方法解決,初學flex的我就實踐出這兩種方法啦,希望能幫助到一些踩坑的童鞋)
