uni-app Flex布局

Flexbox

#Flex 容器

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

nvue布局模型基于 CSS Flexbox，以便所有页面元素的排版能够一致可预测，同时页面布局能适应各种设备或者屏幕尺寸。Flexbox 包含 flex 容器和 flex 成员项。如果一个nvue元素可以容纳其他元素，那么它就成为 flex 容器。

文档中未说明的 flexbox 属性均不支持：如 order、flex-grow 、flex-shrink 、 flex-basis、align-content、align-self 等。

在 nvue中，Flexbox 是默认且唯一的布局模型，所以你不需要手动为元素添加 display: flex; 属性。

#flex-direction

定义了 flex 容器中 flex 成员项的排列方向，默认值为 column

可选值	描述
column	竖排，从上到下排列
column-reverse	反向竖排，排布方向与flex-direction:column相反
row	横排，从左到右排布
row-reverse	反向横排，排布方向与flex-direction:row相反

#flex-wrap

决定了 flex 成员项在一行还是多行分布，默认值为nowrap

可选值	描述
nowrap	不换行，flex 成员项在一行排布，排布的开始位置由direction指定
wrap	换行，第一行在上方，flex 成员项在多行排布，排布的开始位置由direction指定
wrap-reverse	换行，第一行在下方，行为类似于wrap，排布方向与其相反

#justify-content

定义了 flex 容器中 flex 成员项在主轴方向上如何排列以处理空白部分。默认值为 flex-start

可选值	描述
flex-start	左对齐，所有的 flex 成员项都排列在容器的前部
flex-end	右对齐，则意味着成员项排列在容器的后部
center	居中，即中间对齐，成员项排列在容器中间、两边留白
space-between	两端对齐，空白均匀地填充到 flex 成员项之间
space-around	表示 flex 成员项两侧的间隔相等，所以，成员项之间的间隔比成员项与边框的间隔大一倍

#align-items

定义了 flex 容器中 flex 成员项在纵轴方向上如何排列以处理空白部分。默认值为 stretch。

可选值	描述
stretch	即拉伸高度至 flex 容器的大小
flex-start	上对齐，所有的成员项排列在容器顶部
flex-end	下对齐，所有的成员项排列在容器底部
center	中间对齐，所有成员项都垂直地居中显示

#flex

flex 属性定义了 flex 成员项可以占用容器中剩余空间的大小。 flex {number}：值为 number 类型。

• 如果所有的成员项设置相同的值 flex: 1，它们将平均分配剩余空间。
• 经常用作自适应布局，将父容器的display：flex，侧边栏大小固定后，将内容区flex：1，内容区则会自动放大占满剩余空间。
• 如果一个成员项设置的值为 flex: 2，其它的成员项设置的值为 flex: 1，那么这个成员项所占用的剩余空间是其它成员项的 2 倍。

注意

Flex 成员项暂不支持 flex-shrink 、 flex-basis、align-content 属性。

该属性不支持 flex: flex-grow | flex-shrink | flex-basis 的简写。

	<!-- Gird布局 -->
	<template>
		<view>
			<view v-for="(v, i) in list" class="row">
				<view v-for="(text, k) in v" class="item">
					<view>
						<text>{{text}}</text>
					</view>
				</view>
			</view>
		</view>
	</template>
	<script>
		export default {
			data() {
				return {
					list: [
						['A', 'B', 'C'],
						['D', 'E', 'F'],
						['G', 'H', 'I']
					]
				}
			}
		}
	</script>
	<style scoped>
	.row {
		flex-direction: row;
		height: 80px;
	}
	.item {
		flex: 1;
		justify-content: center;
		align-items: center;
		border-width: 1;
		border-style: solid;
		border-color: #FFFFFF;
		background-color: #00AAFF;
	}
	</style>

	<!-- 等高模块 -->
	<template>
	  <view>
	    <view style="width:300px; height:100px;">
	      <view style="flex: 1;background-color:blue"></view>
	      <view style="flex: 1;background-color:red"></view>
	      <view style="flex: 1;background-color:yellow"></view>
	    </view>
	  </view>
	</template>