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>
相关推荐
lzb_kkk19 天前
【MFC】编辑框、下拉框、列表控件
c语言·开发语言·c++·mfc·1024程序员节
lzb_kkk20 天前
【MFC】树控件的使用详解
开发语言·c++·windows·mfc·1024程序员节
SizeTheMoment1 个月前
List介绍
1024程序员节
开利网络2 个月前
产业互联网+三融战略:重构企业增长密码
大数据·运维·服务器·人工智能·重构·1024程序员节
wei_shuo2 个月前
从数据中台到数据飞轮:实现数据驱动的升级之路
1024程序员节·数据飞轮
玖剹2 个月前
矩阵区域和 --- 前缀和
数据结构·c++·算法·leetcode·矩阵·动态规划·1024程序员节
jamison_13 个月前
文心一言与 DeepSeek 的竞争分析:技术先发优势为何未能转化为市场主导地位?
人工智能·ai·chatgpt·gpt-3·1024程序员节
NaZiMeKiY3 个月前
HTML5前端第六章节
前端·html·html5·1024程序员节
jamison_13 个月前
颠覆未来:解锁ChatGPT衍生应用的无限可能(具体应用、功能、付费模式与使用情况)
ai·chatgpt·1024程序员节
NaZiMeKiY4 个月前
HTML5前端第七章节
1024程序员节