uniapp使用navigator标签不支持flex布局

前言

今天使用uniapp开发时，选用navigator作为flex布局容器 ，内部元素水平排列，可是发现微信小程序生效，网页端不生效。

微信小程序效果如下：

网页端效果如下：

源代码如下：

html 复制代码

<template>
	<view class="root">
		
		<text>navigator容器使用flex布局</text>
		<navigator class="navigator-box">
			<view class="box1"></view>
			<view class="box2"></view>
			<view class="box3"></view>
		</navigator>
		
		<text>view使用flex布局</text>
		<view class="view-box">
			<view class="box1"></view>
			<view class="box2"></view>
			<view class="box3"></view>
		</view>
		
	</view>
</template>
<style lang="scss" scoped>
	
	.root {
		// navigator标签设置flex布局在网页端不生效
		.navigator-box {
            //	设置水平flex布局	
			display: flex;
			flex-direction: row;
		}
		
		.view-box {
            //	设置水平flex布局	
			display: flex;
			flex-direction: row;
		}
		
		.box1 {
			background-color: red;
			width: 100px;
			height: 100px;
		}
		.box2 {
			background-color: green;
			width: 100px;
			height: 100px;
		}
		.box3 {
			background-color: blue;
			width: 100px;
			height: 100px;
		}
		text {
			display: block;
			margin: 20px 50px;
			font-size: 20px;
			
		}
	}
</style>

使用navigator标签要注意的坑

① navigator标签在非小程序端（如网页端、安卓端） 不支持flex布局

② navigator标签在非小程序端（如网页端、安卓端） 不支持css的一级子元素选择器 （如 navigator>view，不能在网页端选中navigator标签内部的一级子元素view）

问题解决

如果需要对navigator内部的元素进行样式调整，就将navigator内部的所有元素用view容器包裹，然后对这个view容器进行css修饰

上面的代码出现的不兼容问题调整之后源码如下：

html 复制代码

<template>
	<view class="root">
		
		<text>navigator容器使用flex布局</text>
		<navigator class="navigator-box">
			<!-- 将navigator内部所有元素用一个view容器包裹，然后对view容器单独修饰 -->
			<view class="container">
				<view class="box1"></view>
				<view class="box2"></view>
				<view class="box3"></view>
			</view>
		</navigator>
		
		<text>view使用flex布局</text>
		<view class="view-box">
			<view class="box1"></view>
			<view class="box2"></view>
			<view class="box3"></view>
		</view>
		
	</view>
</template>
<style lang="scss" scoped>
	
	.root {
		.container {
			display: flex;
			flex-direction: row;
		}
		
		.view-box {
			display: flex;
			flex-direction: row;
		}
		
		.box1 {
			background-color: red;
			width: 100px;
			height: 100px;
		}
		.box2 {
			background-color: green;
			width: 100px;
			height: 100px;
		}
		.box3 {
			background-color: blue;
			width: 100px;
			height: 100px;
		}
		text {
			display: block;
			margin: 20px 50px;
			font-size: 20px;
			
		}
	}
</style>