# 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) ## 布局示例  整个页面采用垂直方向布局，指定flex:1意思是说该容器占满整个屏幕的宽度，从上到下依次排列 ``` <view style="flex-direction: column; flex: 1;"> </view> ``` 也可以使用width=100%来实现同样的效果 ``` <view style="flex-direction: column; width:100%;"> </view> ``` Flex布局中如果没有指定flex的值，那么默认为内容的宽度，例如第一行，三个view显示内容的宽度，从左到右方向依次排列。  ``` <view> <view> 1,1</view> <view> 1,2</view> <view>1,3</view> </view> ``` 第二行，指定了第一个和第3个flex值，那么除掉第二个view占的宽度之外剩余的宽度被分成`1+2=3`份，第一个view占1份，第三个view占2份。  ``` <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; " ```  ``` <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` * 弹性盒子元素在该行的侧轴（纵轴，即垂直方向）上居中放置。