Flex布局 · uni-app跨平臺移動應用開發

# Flex布局 Flex是Flexible Box的縮寫，意為“彈性布局”，用來為盒狀模型提供最大的靈活性。當設置display: flex后，繼續給view等容器組件設置flex-direction: row或column，就可以在該容器內按行或列排布子組件。uni-app默認全局使用flex布局（在App.vue里預設）。因為flex布局有利于跨更多平臺，尤其是采用原生渲染的平臺。關于Flex布局可以閱讀以下的一份在線文檔 [http://www.runoob.com/w3cnote/flex-grammar.html](http://www.runoob.com/w3cnote/flex-grammar.html) ## 布局示例 ![](https://box.kancloud.cn/5579a8cdea698e48a0c4e4ef56dfe448_914x779.png) 整個頁面采用垂直方向布局，指定flex:1意思是說該容器占滿整個屏幕的寬度，從上到下依次排列 ``` <view style="flex-direction: column; flex: 1;"> </view> ``` 也可以使用width=100%來實現同樣的效果 ``` <view style="flex-direction: column; width:100%;"> </view> ``` Flex布局中如果沒有指定flex的值，那么默認為內容的寬度，例如第一行，三個view顯示內容的寬度，從左到右方向依次排列。 ![](https://box.kancloud.cn/94c5e024e27eada1f70f2051b59ad314_500x82.png) ``` <view> <view> 1,1</view> <view> 1,2</view> <view>1,3</view> </view> ``` 第二行，指定了第一個和第3個flex值，那么除掉第二個view占的寬度之外剩余的寬度被分成`1+2=3`份，第一個view占1份，第三個view占2份。 ![](https://box.kancloud.cn/8abc4cf48ef5e61bf6acad475cc63559_499x83.png) ``` <view> <view style="flex: 1;"> 2,1</view> <view> 2,2</view> <view style="flex: 2;">2,3</view> </view> ``` 如果希望容器內容靠右，如第三行最后一個view的內容居右，可以讓父容器占滿行剩余空間，并設置： ``` style="flex: 1; justify-content: flex-end; " ``` ![](https://box.kancloud.cn/6311ffb9366d09c4e46c97faf89677df_313x74.png) ``` <view> <view> 3,1</view> <view> 3,2</view> <view style="flex: 1; justify-content: flex-end; "> <view>3,3</view> </view> </view> ``` 完整的清單： pages/home/about.vue ``` <template> <view style="flex-direction: column; flex: 1;"> <view> <view> 1,1</view> <view> 1,2</view> <view>1,3</view> </view> <view> <view style="flex: 1;"> 2,1</view> <view> 2,2</view> <view style="flex: 2;">2,3</view> </view> <view> <view> 3,1</view> <view> 3,2</view> <view style="flex: 1; justify-content: flex-end; "> <view>3,3</view> </view> </view> </view> </template> <script> export default {}; </script> <style> view { display: flex; flex-direction: row; border: #8F8F94 solid 1upx; margin: 20upx; } </style> ``` ## Flex布局實現水平與垂直居中例如在購物車中沒有任何商品的時候居中顯示一行提示或者一張圖片。 ``` <template> <view class="empty-shopping-cart"> <text>購物車啥都沒有！</text> </view> </template> <style> .empty-shopping-cart { display: flex; flex: 1; flex-direction: row; justify-content: center; align-items: center; } </style> ``` 首先控制view的布局為Flex布局，通過flex:1設置占滿整個容器的空間，通過 ``` justify-content: center; align-items: center; ``` 設置水平和垂直居中。 `justify-content: center` * 彈性盒子元素將向行中間位置對齊。該行的子元素將相互對齊并在行中居中對齊，同時第一個元素與行的主起始位置的邊距等同與最后一個元素與行的主結束位置的邊距（如果剩余空間是負數，則保持兩端相等長度的溢出）。 `align-items: center` * 彈性盒子元素在該行的側軸（縱軸，即垂直方向）上居中放置。