一:testview.wxml,testview.js自动生成示例代码

//testview.wxml
<view class="section">
<view class="section__title">flex-direction: row</view>
<view class="flex-wrp" style="display:flex; flex-direction:row;">
<view class="flex-item bc_green" style="background-color:green">1</view>
<view class="flex-item bc_red" style="background-color:red">2</view>
<view class="flex-item bc_blue" style="background-color:blue">3</view>
</view>
</view>
<view class="section">
<view class="section__title">flex-direction: column</view>
<view class="flex-wrp" style="display:flex;height: 300px;flex-direction:column;">
<view class="flex-item bc_green" style="background-color:green">1</view>
<view class="flex-item bc_red" style="background-color:red">2</view>
<view class="flex-item bc_blue" style="background-color:blue">3</view>
</view>
</view>

二:testview.wxss

//testview.wxss
.flex-item{
display: flex;
height: 50px;
width: 50px;
align-items: center;
justify-content: center;
border: 1px solid orange;
}

三:app.json上配置页面路径,效果如下

微信小程序view标签以及display:flex的测试的更多相关文章

  1. 微信小程序 View:flex 布局

    微信小程序 View 支持两种布局方式:Block 和 Flex 所有 View 默认都是 block 要使用 flex 布局的话需要显式的声明: display:flex; 下面就来介绍下微信小程序 ...

  2. 微信小程序实现标签页滑块效果

    微信小程序实现标签页滑块效果 小程序完整代码: wxml: <view class="swiper-tab"> <view class="swiper- ...

  3. Java的家庭记账本程序(H) :微信小程序 image 标签,在模拟器中无法显示图片?(已解决)

    日期:2019.2.25 博客期:036 星期一 吼!今天我还是继续研究了自己的微信小程序,还没有连接数据库,只是在xml的设计上添加了不少东西,大家可以看我的截图,嗯~说到今天的收获,就是 marg ...

  4. 微信小程序开发之搞懂flex布局2——flex container

    容器的概念,是用来包含其它容器(container)和项目(item). flex container——flex容器 A flexbox layout is defined using the fl ...

  5. 微信小程序text标签

    最近在做小程序,使用<text>标签的时候发现里面的文本text-family不生效, 经过试验,发现直接在text标签的class设置不生效,可以在外层包一个父元素就可以设置了. < ...

  6. 微信小程序-view组件

    <view class="section"> <view class="section__title">flex-direction: ...

  7. 微信小程序 view 布局

    刚看到这个效果的时候还真是和ReactNative的效果一致,属性也基本的一样. view这个组件就是一个视图组件使用起来非常简单. 主要属性: flex-direction: 主要两个特性”row” ...

  8. 微信小程序 view中的image水平垂直居中

    当 display: flex 配合 justify-content: center 使用时可以让view水平居中 而配合 align-items: center 用时可以实现垂直居中效果 .card ...

  9. 微信小程序的标签和html标签比较

    html 小程序 <div></div> <view></view> <h1><h2>....<h6> <p& ...

随机推荐

  1. win10*64+vs2015+opencv3.0工程模板配置

    参考网上的资料,自己再次整合一下,为新手提供个方便,也为自己备份. 一.下载安装opencv3.0 1.首先下载opencv3.0的包(windows版本的) 2.安装opencv,路径自己选好,自动 ...

  2. Java中parse()和valueOf(),toString()的区别

    1.parse()是SimpleDateFomat里面的方法,你说的应该是parseInt()或parsefloat()这种方法吧, 顾名思义 比如说parseInt()就是把String类型转化为i ...

  3. mysql数据库密码更改

    先记下,随后继续更改! 方法1: 用SET PASSWORD命令 首先登录MySQL. mysql> set password for 用户名@localhost = password('新密码 ...

  4. c++类大小问题

    1.空类 class A { }; 解析:类的实例化就是为每个实例在内存中分配一块地址:每个类在内存中都有唯一的标识,因此空类被实例化时,编译器会隐含地为其添加一个字节,以作区分. 2.虚函数类 cl ...

  5. 为什么eclipse修改程序之后运行的时候还是前一版本的内容?

    问题:我用的是Eclipse Java Neon4.6.0,同样的这个问题也出现在其他的Eclipse的版本上,我在对我的代码内容进行修改的时候,点击运行,发现还是执行的修改之前的文件,这让我很头疼. ...

  6. Java 实现 Domino邮箱自动注册

    一.前提条件 Domino服务器需开通DIIOP服务 二.需要导入Java包 import lotus.domino.*; 三.实现Java代码 public void cerateID(MailPe ...

  7. EasuUI-js(EasyUI formatter格式化教程) 判断常用:

    EasuUI-js(EasyUI formatter格式化教程) 判断常用: 1.YN标记: formatter : function(c1, row,index) { var a = "& ...

  8. fiddler mock ==> AutoResponder

    背景 做过测试的同学,肯定都听过fiddler的大名,抓包工具,app抓包 下载传送门(https://www.telerik.com/download/fiddler) 抓包使用这里就不复述了,这次 ...

  9. 【SQL*PLUS】常规使用

    登陆SQL*PLUS sqlplus sys/Manager123 as sysdba 创建数据库实例并挂载数据库,此时加载数据库文件,但数据表不能访问. SQL>startup mount; ...

  10. 【Unity游戏开发】浅谈Unity游戏开发中的单元测试

    一.单元测试的定义与作用 单元测试定义:单元测试在传统软件开发中是非常重要的工具,它是指对软件中的最小可测试单元进行检查和验证,一般情况下就是对代码中的一个函数去进行验证,检查它的正确性.一个单元测试 ...