Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。当设置display: flex后，继续给view等容器组件设置flex-direction: row或column，就可以在该容器内按行或列排布子组件。uni-app推荐使用flex布局。因为flex布局有利于跨更多平台，尤其是采用原生渲染的平台。
flex-direction: row
横向布局
A
B
C
flex-direction: column
纵向布局
A
B
C
更多布局示例
flex布局演示
纵向布局-自动宽度
纵向布局-固定宽度
横向布局-自动宽度
横向布局-自动宽度
横向布局-居中
横向布局-居中
横向布局-居右
横向布局-居右
横向布局-平均分布
横向布局-平均分布
横向布局-两端对齐
横向布局-两端对齐
固定宽度
自动占满余量
固定宽度
自动占满
固定宽度
一行显示不全,wrap折行
一行显示不全,wrap折行
一行显示不全,wrap折行
垂直居顶
垂直居中
垂直居底
组合示例
flex布局演示
文字居左，留出左间距
剩余数量
立即购买