Flex 布局

flex 布局样式

在开发中我们应该使用 flex 布局来实现项目页面的基础布局。uxui 已经为您封装好了常用的 flex 布局样式，直接使用即可。

内置 flex 样式

.ux-flex{display:flex;}
.ux-row{flex-direction:row;}
.ux-column{flex-direction:column;}
.ux-wrap{flex-direction:row; flex-wrap:wrap;}
.ux-nowrap{flex-direction:row; flex-wrap:nowrap;}
.ux-space-around{justify-content:space-around;}
.ux-space-between{justify-content:space-between;}
.ux-justify-content-start{justify-content:flex-start;}
.ux-justify-content-center{justify-content:center;}
.ux-justify-content-end{justify-content:flex-end;}
.ux-align-items-start{align-items:flex-start;}
.ux-align-items-center{align-items:center;}
.ux-align-items-end{align-items:flex-end;}
.ux-flex1{flex:1;}
.ux-flex-shrink1{flex-shrink:1;}

演示代码

<template>
	<scroll-view class="ux-body ux-page-color ux-flex1">
		<text class="ux-h6 ux-color-grey ux-mt">横向压缩</text>
		<view class="ux-flex ux-row ux-nowrap demo-mt">
			<text class="demo ux-flex-shrink1"></text>
			<text class="demo ux-flex-shrink1"></text>
			<text class="demo ux-flex-shrink1"></text>
			<text class="demo ux-flex-shrink1"></text>
			<text class="demo"></text>
		</view>
		<text class="ux-h6 ux-color-grey ux-mt">横向换行</text>
		<view class="ux-flex ux-row ux-wrap demo-mt">
			<text class="demo"></text>
			<text class="demo"></text>
			<text class="demo"></text>
			<text class="demo"></text>
			<text class="demo"></text>
		</view>
		<text class="ux-h6 ux-color-grey ux-mt">横向占满</text>
		<view class="ux-flex ux-row demo-mt">
			<text class="demo"></text>
			<text class="demo ux-flex1">.ux-flex1</text>
		</view>
		<text class="ux-h6 ux-color-grey ux-mt">横向两端</text>
		<view class="ux-flex ux-row ux-space-between ux-align-items-center demo-mt">
			<text class="demo" style="height:100rpx;"></text>
			<text class="demo"></text>
		</view>
		<text class="ux-h6 ux-color-grey ux-mt">横向结束端对齐</text>
		<view class="ux-flex ux-row ux-justify-content-end demo-mt">
			<text class="demo"></text>
			<text class="demo"></text>
		</view>
		<text class="ux-h6 ux-color-grey ux-mt">竖向布局</text>
		<view class="ux-flex ux-column demo-mt">
			<text class="demo"></text>
			<text class="demo"></text>
		</view>
	</scroll-view>
</template>
<script lang="uts">
export default {
	data() {
		return {
			
		}
	},
	methods: {
		
	}
}
</script>
<style scoped>
.demo-mt{margin-top:18rpx;}
.demo{width:210rpx; height:80rpx; background:#EFF1F6; line-height:80rpx; font-size:22rpx; text-align:center; margin:6rpx 10rpx 6px 0;}
</style>