uni-app Flex布局

秒速五厘米 2023-07-05 10:23 6阅读 0赞

> 1.  为支持跨平台，框架建议使用Flex布局

layout.vue

<template>
    	<view class="layout">
    		<view class="container">
    			<view class="left">
    				<view class="green">
    					<text>A</text>
    				</view>
    				<view class="red">
    					<text>B</text>
    				</view>
    				<view class="blue">
    					<text>C</text>
    				</view>
    				<view class="yellow">
    					<text>D</text>
    				</view>
    			</view>
    			<view class="right">
    				<view class="orange">
    					<text>E</text>
    				</view>
    				<view class="pink">
    					<text>F</text>
    				</view>
    			</view>
    		</view>
    		<view class="order">
    			<view class="box green">
    				<text>A</text>
    			</view>
    			<view class="box red">
    				<text>B</text>
    			</view>
    			<view class="box blue">
    				<text>C</text>
    			</view>
    		</view>
    	</view>
    </template>
    
    <script>
    	export default { 
    		data() { 
    			return { 
    				
    			}
    		},
    		methods: { 
    			
    		}
    	}
    </script>
    
    <style lang="scss" scoped>
    	.container { 
    		height: 600rpx;
    		display: flex;
    		flex-direction: column;
    		flex-wrap: wrap;
    		justify-content: space-between;
    		// align-content: space-between;
    		align-content: stretch; /* 未设置宽度时拉伸 */
    	}
    	.order { 
    		display: flex;
    		flex-direction: row;
    		.box { 
    			width: 150rpx;
    		}
    		.green { 
    			order: 2; /* 顺序 */
    			// flex-grow: 1; /* 拉伸 */
    			flex-basis: 300rpx; /* 拉伸、缩放 */
    		}
    		.red { 
    			order: 3;
    		}
    		.blue { 
    			order: 1;
    			// flex-shrink: 0; /* 缩放 */
    		}
    	}
    	.green, .red, .blue, .yellow, .orange, .pink { 
    		// width: 150rpx;
    		height: 150rpx;
    		font-size: 20rpx;
    		display: flex;
    		justify-content: center;
    		align-items: center;
    	}
    	.green { 
    		background-color: #00FF00;
    	}
    	.red { 
    		background-color: #FF0000;
    	}
    	.blue { 
    		background-color: #0000FF;
    	}
    	.yellow { 
    		background-color: #FFFF00;	
    	}
    	.orange { 
    		background-color: #FFA500;
    	}
    	.pink { 
    		background-color: #FFC0CB;
    	}
    </style>