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

前言

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

微信小程序效果如下：

网页端效果如下：

 源代码如下：

<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修饰

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

<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>